[data-rs-collapsible] {
display: flex;
flex-direction: column;
gap: var(--collapsible-gap);
}
[data-rs-collapsible-trigger] {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--collapsible-trigger-padding);
background: var(--collapsible-trigger-bg);
border-radius: var(--collapsible-trigger-radius);
color: var(--collapsible-trigger-fg);
cursor: pointer;
transition: background var(--collapsible-transition-duration) var(--collapsible-transition-ease);
}
[data-rs-collapsible-trigger]:focus-visible {
outline: var(--focus-ring-width) solid var(--theme-action-focus-ring);
outline-offset: var(--focus-ring-offset);
}
[data-rs-collapsible-trigger][data-rs-state~="hover"]:not([data-rs-state~="disabled"]):not([data-rs-state~="open"]) {
background: var(--collapsible-trigger-hover-bg);
}
[data-rs-collapsible-content] {
padding: var(--collapsible-content-padding);
display: none;
}
[data-rs-collapsible-trigger]::after {
content: "▸";
font-size: var(--font-size-xs);
color: var(--collapsible-trigger-fg);
transition: transform var(--collapsible-transition-duration) var(--collapsible-transition-ease);
flex-shrink: 0;
}
[data-rs-collapsible][data-rs-state~="open"] [data-rs-collapsible-trigger]::after {
content: "▾";
}
[data-rs-collapsible][data-rs-state~="open"] [data-rs-collapsible-trigger] {
color: var(--collapsible-trigger-open-fg);
}
[data-rs-collapsible][data-rs-state~="open"] [data-rs-collapsible-content] {
display: block;
}
[data-rs-collapsible][data-rs-state~="closed"] [data-rs-collapsible-content] {
display: none;
}