[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 [data-slot="collapsible-trigger"] { height: 37px; } &.tool-collapsible [data-slot="basic-tool-content-inner"] { padding-top: 0; } [data-slot="collapsible-trigger"] { width: 100%; display: flex; height: 36px; padding: 0; align-items: center; align-self: stretch; cursor: default; user-select: none; color: var(--text-base); > [data-component="tool-trigger"][data-arrow] { width: auto; max-width: 100%; flex: 0 1 auto; [data-slot="basic-tool-tool-trigger-content"] { width: auto; max-width: 100%; } } [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; } /* text-12-medium */ 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); /* 166.667% */ letter-spacing: var(--letter-spacing-normal); &:focus-visible { outline: none; background-color: var(--surface-raised-base-hover); } &[data-disabled] { cursor: not-allowed; } [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: clip; &[data-expanded] { overflow: visible; } /* JS-animated content: overflow managed by animate() */ &[data-spring-content] { overflow: clip; } } &[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; } } }