/* Ensure the plus icon in accordion summaries sized */
.accordion .icon-plus,
.accordion .icon-plus svg,
.accordion .icon-minus,
.accordion .icon-minus svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  fill: var(--color-foreground);
}

.accordion .details:not([open]) .icon-minus {
  display: none;
}

.accordion .details[open] .icon-plus {
  display: none;
}

/* BBD: Accordion dividers using masked pseudo-borders */
.accordion--dividers accordion-custom .details {
  position: relative;
}

/* Disable native borders set inline; we'll draw them with masks instead */
.accordion--dividers accordion-custom:not(:first-child) .details {
  border-block-start: 0 !important;
}

.accordion--dividers accordion-custom:last-child .details {
  border-block-end: 0 !important;
}

.accordion--dividers accordion-custom:first-child .details {
  border-block-start: 0 !important;
}

/* Bottom divider for every row; for the last row it respects --show-fallback-borders */
.accordion--dividers accordion-custom .details::after {
  content: '';
  position: absolute;
  inset: 0;

  /* Use border color without affecting text; currentColor is taken from this pseudo-element */
  color: var(--color-border);
  background: currentColor;
  /* stylelint-disable-next-line function-url-scheme-allowed-list */
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDE2IDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDAuNUMxLjc0NjQ4IDAuNSAyLjI1MzUyIDEuNSA0IDEuNUM1Ljc0NjQ4IDEuNSA2LjI1MzUyIDAuNSA4IDAuNUM5Ljc0NjQ4IDAuNSAxMC4yNTM1IDEuNSAxMiAxLjVDMTMuNzQ2NSAxLjUgMTQuMjUzNSAwLjUgMTYgMC41IiBzdHJva2U9ImJsYWNrIi8+Cjwvc3ZnPgo=');
  mask-position: left bottom;
  mask-repeat: repeat-x;
  mask-size: 16px 2px;
  pointer-events: none;
}

/* Hide bottom divider on the last item unless fallback borders should show */
.accordion--dividers accordion-custom:last-child .details::after {
  opacity: var(--show-fallback-borders);
}

/* Top divider only for the first item, following fallback logic */
.accordion--dividers accordion-custom:first-child .details::before {
  content: '';
  position: absolute;
  inset: 0;
  color: var(--color-border);
  background: currentColor;
  /* stylelint-disable-next-line function-url-scheme-allowed-list */
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDE2IDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDAuNUMxLjc0NjQ4IDAuNSAyLjI1MzUyIDEuNSA0IDEuNUM1Ljc0NjQ4IDEuNSA2LjI1MzUyIDAuNSA4IDAuNUM5Ljc0NjQ4IDAuNSAxMC4yNTM1IDEuNSAxMiAxLjVDMTMuNzQ2NSAxLjUgMTQuMjUzNSAwLjUgMTYgMC41IiBzdHJva2U9ImJsYWNrIi8+Cjwvc3ZnPgo=');
  mask-position: left top;
  mask-repeat: repeat-x;
  mask-size: 16px 2px;
  pointer-events: none;
  opacity: var(--show-fallback-borders);
}

accordion-custom summary {
  padding-block: var(--padding-lg);
}

accordion-custom .details-content {
  .metafield-rich_text_field,
  rte-formatter {
    --max-width--body-normal: 100%;
    max-inline-size: 100%;
  }
}