:where(.accordion) {
  details {
    border-block-end-width: var(--border);
    font-size: var(--text-sm);

    &::details-content {
      block-size: 0;
      overflow: hidden;
      transition-behavior: allow-discrete;
      transition-duration: var(--time-200);
      transition-property: content-visibility block-size;
    }

    &[open]::details-content {
      block-size: auto;
    }
  }

  summary {
    align-items: center;
    cursor: default;
    display: flex;
    font-weight: var(--font-medium);
    padding-block: var(--size-4);

    &:focus-visible {
      outline: var(--border-2) auto var(--color-selected-dark);
    }

    &::after {
      background-color: currentColor;
      block-size: var(--size-4);
      content: "";
      inline-size: var(--size-4);
      margin-inline-start: auto;
      mask-image: url("/assets/chevron-down-af4dffe4.svg");
      mask-size: cover;
      transition: transform var(--time-200);
    }

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

:where(.highlighted-accordion) {
  background-color: color-mix(in srgb, var(--color-surface) 94%, var(--pehuen-primary-50) 6%);
  border-color: color-mix(in srgb, var(--pehuen-primary-200) 56%, var(--color-border) 44%);
  box-shadow: 0 1px 2px rgb(from var(--pehuen-primary-900) r g b / 0.04);
  transition:
    background-color var(--time-150),
    border-color var(--time-150),
    box-shadow var(--time-150);

  &:not([open]):hover {
    border-color: color-mix(in srgb, var(--pehuen-primary-300) 48%, var(--color-border) 52%);
    box-shadow: 0 8px 18px -18px rgb(from var(--pehuen-primary-900) r g b / 0.18);
  }

  &[open] {
    background-color: var(--color-surface);
    border-color: color-mix(in srgb, var(--pehuen-primary-200) 76%, var(--color-border) 24%);
    box-shadow: 0 12px 26px -24px rgb(from var(--pehuen-primary-900) r g b / 0.22);
  }

  > summary {
    background-color: color-mix(in srgb, var(--color-surface) 86%, var(--pehuen-primary-50) 14%);
    color: color-mix(in srgb, var(--stone-900) 82%, var(--pehuen-primary-900) 18%);
    transition:
      background-color var(--time-150),
      color var(--time-150);

    &:hover {
      background-color: color-mix(in srgb, var(--color-surface) 74%, var(--pehuen-primary-100) 26%);
      color: var(--pehuen-primary-900);
    }

    &:focus-visible {
      outline: var(--border-2) solid color-mix(in srgb, var(--pehuen-primary-300) 72%, var(--color-surface) 28%);
      outline-offset: calc(var(--border) * -1);
    }

    &::after {
      opacity: 0.58;
    }

    > svg:first-child {
      background-color: color-mix(in srgb, var(--pehuen-primary-100) 58%, var(--color-surface) 42%);
      border: var(--border) solid color-mix(in srgb, var(--pehuen-primary-200) 76%, var(--color-surface) 24%);
      border-radius: var(--rounded-sm);
      box-sizing: content-box;
      color: var(--pehuen-primary-600);
      padding: var(--size-1);
    }
  }

  &[open] > summary {
    background-color: color-mix(in srgb, var(--color-surface) 80%, var(--pehuen-primary-50) 20%);
  }

  .text-base {
    font-size: var(--text-sm);
  }

  .text-sm {
    font-size: var(--text-xs);
  }
}