| [data-component="collapsible"] { |
| width: 100%; |
| display: flex; |
| flex-direction: column; |
| background-color: transparent; |
| border: none; |
| transition: background-color 0.15s ease; |
| border-radius: var(--radius-md); |
| overflow: visible; |
|
|
| &.tool-collapsible { |
| --tool-content-gap: 4px; |
| gap: var(--tool-content-gap); |
| } |
|
|
| [data-slot="collapsible-trigger"] { |
| width: 100%; |
| display: flex; |
| height: 32px; |
| padding: 0; |
| align-items: center; |
| align-self: stretch; |
| cursor: default; |
| user-select: none; |
| color: var(--text-base); |
|
|
| [data-slot="collapsible-arrow"] { |
| opacity: 0; |
| transition: opacity 0.15s ease; |
| will-change: opacity; |
| transform: translateZ(0); |
| } |
|
|
| [data-slot="collapsible-arrow-icon"] { |
| display: inline-flex; |
| color: var(--icon-weaker); |
| transform: translateZ(0) rotate(-90deg); |
| transition: transform 0.15s ease; |
| will-change: transform; |
| } |
|
|
| &:hover [data-slot="collapsible-arrow"] { |
| opacity: 1; |
| } |
|
|
| |
| font-family: var(--font-family-sans); |
| font-size: var(--font-size-small); |
| font-style: normal; |
| font-weight: var(--font-weight-medium); |
| line-height: var(--line-height-large); |
| letter-spacing: var(--letter-spacing-normal); |
|
|
| |
| |
| |
| &:focus-visible { |
| outline: none; |
| background-color: var(--surface-raised-base-hover); |
| } |
| &[data-disabled] { |
| cursor: not-allowed; |
| } |
|
|
| &[data-hide-details="true"] { |
| height: auto; |
| align-items: stretch; |
| } |
|
|
| [data-slot="collapsible-arrow"] { |
| flex-shrink: 0; |
| width: 24px; |
| height: 24px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| } |
|
|
| [data-slot="collapsible-trigger"][aria-expanded="true"] { |
| [data-slot="collapsible-arrow"] { |
| opacity: 1; |
| } |
|
|
| [data-slot="collapsible-arrow-icon"] { |
| transform: translateZ(0) rotate(0deg); |
| } |
| } |
|
|
| [data-slot="collapsible-content"] { |
| overflow: hidden; |
| |
|
|
| &[data-expanded] { |
| overflow: visible; |
| } |
|
|
| |
| |
| |
| } |
|
|
| &[data-variant="ghost"] { |
| background-color: transparent; |
| border: none; |
|
|
| > [data-slot="collapsible-trigger"] { |
| background-color: transparent; |
| border: none; |
| padding: 0; |
|
|
| |
| |
| |
| &:focus-visible { |
| outline: none; |
| background-color: var(--surface-raised-base-hover); |
| } |
| &[data-disabled] { |
| cursor: not-allowed; |
| } |
| } |
| } |
|
|
| &[data-variant="ghost"][data-scope="filetree"] { |
| > [data-slot="collapsible-trigger"] { |
| height: 24px; |
| } |
| } |
|
|
| &[data-variant="ghost"][data-scope="file-tree-v2"] { |
| > [data-slot="collapsible-trigger"] { |
| height: 28px; |
| } |
| } |
| } |
|
|
| @keyframes slideDown { |
| from { |
| height: 0; |
| } |
| to { |
| height: var(--kb-collapsible-content-height); |
| } |
| } |
|
|
| @keyframes slideUp { |
| from { |
| height: var(--kb-collapsible-content-height); |
| } |
| to { |
| height: 0; |
| } |
| } |
|
|
