@layer components {
  /*
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
   Base
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
  */

  .l-disclosure {
    --marker-size: 20px;
    --marker-color: var(--l-color-text-tertiary);

    --_duration: 200ms;
    --_easing: cubic-bezier(0.44, 0.36, 0.04, 1);

    interpolate-size: allow-keywords;

    /* Hide default marker */
    & summary::-webkit-details-marker {
      display: none;
    }

    & summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
      font-weight: 600;
      font-size: var(--l-text-base);
      line-height: 1;
      color: var(--l-color-text-primary);
      list-style: none;
      cursor: pointer;

      &:hover {
        background-color: color-mix(
          in oklab,
          var(--l-color-surface) 95%,
          var(--l-color-text-primary)
        );
      }

      &:focus-visible {
        outline: 2px solid var(--l-focus-ring);
        outline-offset: -2px;
      }
    }

    & > :last-child:not(summary) {
      padding: calc(var(--spacing) * 4);
      color: var(--l-color-text-secondary);
    }

    /* Animate with ::details-content */
    & ::details-content {
      transition:
        content-visibility var(--_duration) var(--_easing) allow-discrete,
        block-size var(--_duration) var(--_easing);
      block-size: 0;
    }

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

  /*
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
   State: disabled
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
  */

  .l-disclosure:has(summary[disabled]),
  .l-disclosure[disabled] {
    & summary {
      cursor: not-allowed;
      pointer-events: none;
      opacity: 0.4;
    }
  }

  /*
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
   Variant: bordered
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
  */

  .l-disclosure[data-variant='bordered'] {
    --border-radius: var(--l-radius-md);
    --border-color: var(--l-color-border);

    background-color: var(--l-color-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: clip;
  }

  /*
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
   Marker
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
  */

  .l-disclosure[data-marker] summary::after {
    content: '';
    display: block;
    height: var(--marker-size);
    width: var(--marker-size);
    flex-shrink: 0;
    transition: rotate var(--_duration) var(--_easing);
  }

  /* arrow */
  .l-disclosure[data-marker='arrow'] summary::after {
    background-color: var(--marker-color);
    /* mdi:chevron-down */
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"/></svg>')
      center no-repeat;
    rotate: 0deg;
  }

  .l-disclosure[data-marker='arrow'][open] summary::after {
    rotate: 180deg;
  }

  /* plus */
  .l-disclosure[data-marker='plus'] summary::after {
    background-color: var(--marker-color);
    /* mdi:plus */
    mask: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z'/></svg>")
      center no-repeat;
    rotate: 0deg;
  }

  .l-disclosure[data-marker='plus'][open] summary::after {
    rotate: 45deg;
  }
}