/* Shared base styles */
details.fbx-default,
details.fbx-answer,
details.fbx-question {
  --text-color: #3c3c3c;
  --font-size: 1rem;
  --font-family: var(--bs-body-font-family, system-ui, sans-serif);
  --border-radius: 0.3rem;
  --border-left-width: 4px;
  --icon-size: 1.1rem;
  --arrow-size: 1rem;
  --padding-y: 0.5rem;
  --padding-x: 0.85rem;
  --padding-summary-y: 0.4rem;

  /* Lua-injected vars or fallbacks */
  --background-color: var(--color1, #f8f9fa);
  --title-background-color: var(--color1);
  --background-color: var(--color2);
  --border-color: var(--color2, #acacac);

  border: 0.5px solid #d0d7de;
  border-left: 0.3rem solid var(--border-color);

  border-radius: var(--border-radius);
  margin: 1rem 0;
  overflow: hidden;
  color: var(--text-color);
  border-radius: var(--border-radius);
}

/* Remove default marker */
details.fbx-default summary,
details.fbx-answer summary,
details.fbx-question summary {
  list-style: none;
}
details.fbx-default summary::-webkit-details-marker,
details.fbx-answer summary::-webkit-details-marker,
details.fbx-question summary::-webkit-details-marker {
  display: none;
}

/* Summary layout */
details.fbx-default > summary,
details.fbx-answer > summary,
details.fbx-question > summary {
  position: relative;
  background-color: var(--title-background-color);
  color: var(--text-color);
  font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  font-size: var(--font-size);
  font-weight: 350;
  opacity: 0.95;
  display: flex;
  align-items: left;
  justify-content: space-between;
  padding: var(--padding-y) var(--padding-x);
  padding-left: calc(var(--padding-x) + var(--icon-size) + 0.25rem);
  padding-top: var(--padding-summary-y);
  padding-bottom: var(--padding-summary-y);
  cursor: pointer;
  transition: background-color 0.2s ease;
   border-top-right-radius: var(--border-radius);
  text-align: left;
}

/* Arrows */
details.fbx-default > summary::after,
details.fbx-answer > summary::after,
details.fbx-question > summary::after {
  content: "";
  display: inline-block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 4L10 8L6 12' stroke='%233c3c3c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  background-color: var(--text-color);
  margin-left: 0.5rem;
  margin-top: 1px;
  vertical-align: middle;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

details.fbx-default[open] > summary::after,
details.fbx-answer[open] > summary::after,
details.fbx-question[open] > summary::after {
  transform: rotate(90deg);
}

/* Icons */
details.fbx-default > summary::before,
details.fbx-answer > summary::before,
details.fbx-question > summary::before {
  content: "";
  position: absolute;
  left: calc(var(--padding-x) - 0.2rem);
  top: 50%;
  transform: translateY(-50%);
  background-size: var(--icon-size) var(--icon-size);
  background-repeat: no-repeat;
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
}

/* Specific icons */
details.callout-quiz-question > summary::before {
  background-image: url("icons/icon_callout-quiz-question.png");
}
details.callout-quiz-answer > summary::before {
  background-image: url("icons/icon_callout-quiz-answer.png");
}
details.callout-resource-slides > summary::before {
  background-image: url("icons/Icon_callout-resource-slides.png");
}
details.callout-resource-videos > summary::before {
  background-image: url("icons/Icon_callout-resource-videos.png");
}
details.callout-resource-exercises > summary::before {
  background-image: url("icons/icon_callout-resource-exercises.png");
}

/* Content body */
details.fbx-default > div,
details.fbx-answer > div,
details.fbx-question > div {
  font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  font-size: var(--font-size);
  font-weight: 400;
  color: var(--text-color);
  background-color: white;
  padding: 0.75rem var(--padding-x) 1rem;
  line-height: 1.5;
  text-align: left;
  border-bottom-right-radius: var(--border-radius);
  padding-bottom: 0.1rem;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  details.fbx-default,
  details.fbx-answer,
  details.fbx-question {
    --text-color: #e6e6e6;
    --background-color: var(--color1, #2a2a2a);
    --border-color: var(--color2, #4a4a4a);
    background-color: var(--background-color);
    border-color: var(--border-color);
  }

  details.fbx-answer > div,
  details.fbx-question > div {
    background-color: #1e1e1e;
  }

  details.fbx-default > summary::after,
  details.fbx-answer > summary::after,
  details.fbx-question > summary::after {
    background-color: var(--text-color);
  }
}