/*
Collapsible

<div class="collapsible" data-state>
  <span class="collapsible-trigger">        display: contents; wraps the caller's button
  <div class="collapsible-content" data-state [hidden] [data-animating]>
    <div class="collapsible-content-inner">

Closed content is hidden. While the height animates the content carries
data-animating and --content-height (measured by the behavior), clips
its overflow, and runs collapsible-down or collapsible-up. A theme with
zero durations gets no animation and no delay.
*/

@layer components {

.collapsible-trigger {
  display: contents;
}

/* Plain text in a trigger: the behavior wraps it in this button. Before the
   page attaches the part shows the text with the same box, so nothing moves
   when the button appears. */
.collapsible-trigger-button,
.collapsible-trigger:not(:has(button, a[href], input, select, textarea, summary, [tabindex], [role=button])) {
  display:               inline-flex;
  align-items:           center;
  gap:                   var(--space-1);
  width:                 auto;
  height:                auto;
  margin:                0;
  padding:               0;
  border:                0;
  border-radius:         var(--radius-control);
  background:            transparent;
  box-shadow:            none;
  color:                 var(--link);
  font:                  inherit;
  text-align:            inherit;
  text-decoration:       underline;
  text-decoration-color: transparent;
  text-underline-offset: calc(var(--link-underline-offset) * 1.25);
}

.collapsible-trigger-button {
  cursor: pointer;
}

.collapsible-trigger-button:hover {
  text-decoration-color: currentColor;
}

.collapsible-trigger-button:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}

.collapsible-trigger-button:disabled {
  cursor:  not-allowed;
  opacity: var(--opacity-disabled);
}

/* An icon in the trigger that turns with the state: <Icon class="collapsible-chevron" />. */
.collapsible-chevron {
  transition: transform var(--duration-enter) var(--ease-enter);
}

[data-state="open"] > .collapsible-chevron,
[data-state="open"] > .button-label > .collapsible-chevron {
  transform: rotate(180deg);
}

/* A chevron-right that points down when open (file trees). */
[data-state="open"] > .collapsible-chevron.is-right,
[data-state="open"] > .button-label > .collapsible-chevron.is-right {
  transform: rotate(90deg);
}

:dir(rtl) .collapsible-chevron.is-right {
  scale: -1 1;
}

/* Before the page attaches: a root rendered closed hides its content, so
   the server HTML is already right. The behavior sets data-state on the
   content and takes over. */
.collapsible[data-state="closed"] .collapsible-content:not([data-state]) {
  display: none;
}

.collapsible-content[data-animating] {
  overflow: hidden;
}

.collapsible-content[data-animating][data-state="open"] {
  animation: collapsible-down var(--duration-enter) var(--ease-enter);
}

.collapsible-content[data-animating][data-state="closed"] {
  animation: collapsible-up var(--duration-exit) var(--ease-exit) forwards;
}

@keyframes collapsible-down {
  from { height: 0; }
  to   { height: var(--content-height); }
}

@keyframes collapsible-up {
  from { height: var(--content-height); }
  to   { height: 0; }
}

}