/* https://nerdy.dev/open-and-close-transitions-for-the-details-element */

.expander {
  --expander-height: calc(1em + 1lh);
  --expander-width: 11ch;
  --expander-radius: calc(var(--expander-height) / 2);
  --expander-duration: 150ms;

  interpolate-size: allow-keywords;
  position: relative;
  z-index: 1;
}

.expander__button {
  --btn-border-radius: var(--expander-radius);

  align-items: center;
  block-size: var(--expander-height);
  cursor: pointer;
  display: flex;
  inline-size: var(--expander-width);
  justify-content: flex-start;
  padding-inline: 1.5ch;
  position: relative;
  white-space: nowrap;
  z-index: 1;

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

  [open] & {
    filter: none;
  }

  .icon {
    font-size: 1ch;
  }
}

.expander__content {
  --btn-border-radius: var(--expander-radius);

  align-items: stretch;
  border-radius: var(--expander-radius);
  flex-direction: column;
  filter: none;
  gap: 0;
  padding-block-start: var(--expander-height);

  &:hover {
    box-shadow: none;
  }
}

/* For browsers that support animation */
@supports selector(details::details-content) {
  .expander::details-content {
    --btn-border-radius: var(--expander-radius);

    block-size: var(--expander-height);
    border-radius: var(--expander-radius);
    inset: 0 auto auto 0;
    inline-size: var(--expander-width);
    overflow: clip;
    position: absolute;
    transition: content-visibility var(--expander-duration) allow-discrete, block-size var(--expander-duration), inline-size var(--expander-duration);
  }

  .expander[open]::details-content {
    block-size: auto;
    inline-size: auto;
  }

  .expander__content {
    min-inline-size: var(--expander-width);
  }
}

/* Fallback for browsers that don't support animation */
@supports not selector(details::details-content) {
  .expander__content {
    border-radius: var(--expander-radius);
    inset: 0 auto auto 0;
    min-inline-size: var(--expander-width);
    position: absolute;

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

.expander__item {
  --btn-background: var(--card-color);
  --btn-border-radius: 0.3em;
  --btn-border-size: 0;
  --btn-font-weight: 500;
  --btn-padding: var(--inline-space-half) var(--inline-space);

  inline-size: calc(100% + var(--inline-space-double));
  margin-inline-start: calc(-1 * var(--inline-space));
  justify-content: flex-start;
  white-space: nowrap;

  /* &:hover,
  &:focus-visible {
    background-color: oklch(var(--lch-canvas) / 15%);
  } */
}