/* Accordion: details, summary */
details {
  display: block;
  margin-bottom: var(--pico-spacing);

  & summary {
    line-height: 1rem;
    list-style-type: none;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--pico-transition);

    &:not([role]) {
      color: var(--pico-accordion-close-summary-color);
    }

    &::-webkit-details-marker {
      display: none;
    }

    &::marker {
      display: none;
    }

    &::after {
      display: block;
      width: 1rem;
      height: 1rem;
      margin-inline-start: calc(var(--pico-spacing, 1rem) * 0.5);
      float: right;
      transform: rotate(0);
      background-image: var(--pico-icon-chevron);
      background-position: right center;
      background-size: 1rem auto;
      background-repeat: no-repeat;
      content: "";
      transition: transform var(--pico-transition);
    }

    &:focus {
      outline: none;
    }

    &:focus-visible:not([role]) {
      outline: var(--pico-outline-width) solid var(--pico-primary-focus);
      outline-offset: calc(var(--pico-spacing, 1rem) * 0.5);
      color: var(--pico-accordion-active-summary-color);
    }

    &[role="button"] {
      width: 100%;
      text-align: start;
    }

    &[role="button"]::after {
      height: calc(1rem * var(--pico-line-height, 1.5));
    }
  }

  &[open] > summary {
    margin-bottom: var(--pico-spacing);

    &:not([role]):not(:focus) {
      color: var(--pico-accordion-open-summary-color);
    }

    &::after {
      transform: rotate(180deg);
    }
  }
}

/* A plain accordion item is a row with a divider under it */
:where(details:not(.dropdown):has(> summary:not([role]))) {
  padding-block-end: var(--pico-spacing);
  border-block-end: var(--pico-border-width) solid var(--pico-accordion-border-color);
}

/* Float and background position have no logical keyword */
[dir="rtl"] details summary {
  text-align: right;

  &::after {
    float: left;
    background-position: left center;
  }
}

/* Animated open and close. Browsers without ::details-content or interpolate-size open instantly. */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    details:not(.dropdown) {
      interpolate-size: allow-keywords;

      &::details-content {
        block-size: 0;
        overflow-y: clip;
        transition:
          block-size var(--pico-transition),
          content-visibility var(--pico-transition) allow-discrete;
      }

      /* Clip only while the height animates, so focus rings of controls inside stay whole at rest */
      &[open]::details-content {
        block-size: auto;
        overflow-y: visible;
        animation: accordion-clip var(--pico-transition);
      }

      & > summary:not([role]) {
        transition:
          color var(--pico-transition),
          margin-bottom var(--pico-transition);
      }
    }

    @keyframes accordion-clip {
      from,
      to {
        overflow-y: clip;
      }
    }
  }
}