:where(.accordion-callout) {
  details {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
    margin-bottom: var(--spacing-6);
  }

  details.callout {
    --callout-border-color: var(--primary-400);
    --callout-bg-color: var(--primary-50);

    border-left-width: var(--border-width-thick);
    border-left-style: var(--border-style-solid);
    border-left-color: var(--callout-border-color);
    background-color: var(--callout-bg-color);
  }

  details.callout-no-bg {
    --callout-bg-color: transparent !important;
  }

  details.callout-gray  { --callout-border-color: var(--gray-400); --callout-bg-color: var(--gray-50); }
  details.callout-primary  { --callout-border-color: var(--primary-400); --callout-bg-color: var(--primary-50); }
  details.callout-error  { --callout-border-color: var(--error-400); --callout-bg-color: var(--error-50); }
  details.callout-warning  { --callout-border-color: var(--warning-400); --callout-bg-color: var(--warning-50); }
  details.callout-success  { --callout-border-color: var(--success-400); --callout-bg-color: var(--success-50); }
  details.callout-info  { --callout-border-color: var(--info-400); --callout-bg-color: var(--info-50); }
  details.callout-blue   { --callout-border-color: var(--blue-400); --callout-bg-color: var(--blue-50); }
  details.callout-indigo { --callout-border-color: var(--indigo-400); --callout-bg-color: var(--indigo-50); }
  details.callout-purple { --callout-border-color: var(--purple-400); --callout-bg-color: var(--purple-50); }
  details.callout-pink   { --callout-border-color: var(--pink-400); --callout-bg-color: var(--pink-50); }
  details.callout-rose   { --callout-border-color: var(--rose-400); --callout-bg-color: var(--rose-50); }
  details.callout-orange { --callout-border-color: var(--orange-400); --callout-bg-color: var(--orange-50); }

  details div.content-block {
    margin-top: var(--spacing-8);
  }

  summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);

    &:focus-visible {
      outline: var(--border-width-medium) auto var(--gray-300);
    }

    .accordion-callout-toggle-labels {
      margin-inline-start: auto;
      margin-inline-end: var(--spacing-2);
      display: flex;
      align-items: center;
      gap: var(--spacing-2);
      color: var(--primary-700);
      font-size: var(--font-size-xs);
    }

    .accordion-callout-toggle-label {
      font-weight: var(--font-weight-normal);
      text-decoration: underline;
    }

    .accordion-callout-toggle-label--open {
      display: none;
    }

    &::after {
      content: "\F282";
      font-family: "bootstrap-icons";
      font-size: var(--font-size-xs);
      transition: transform var(--transition-duration-200);
      color: var(--primary-700);
    }

    details[open] > &::after {
      transform: rotate(-180deg);
    }
  }

  details[open] > summary .accordion-callout-toggle-label--closed {
    display: none;
  }

  details[open] > summary .accordion-callout-toggle-label--open {
    display: inline;
  }

  .accordion-callout-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
  }

  .accordion-callout-field__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--gray-600);
  }

  .accordion-callout-field__value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--gray-900);
  }
}