/* CollapsibleItem — molecule. Spec: component-specs/collapsible-item.md */

.collapsible-item {
    border-bottom: var(--border-hairline) solid var(--border-default);
}

.collapsible-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.collapsible-item-trigger {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    padding-block: 12px;
    border: none;
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-weight: var(--font-weight-medium);
    text-align: left;
    cursor: pointer;
}

.collapsible-item-chevron {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--text-tertiary);
    transform: rotate(0deg);
    transition: transform 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.collapsible-item[data-state='closed'] .collapsible-item-chevron {
    transform: rotate(-90deg);
}

.collapsible-item-permalink {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    color: var(--text-quaternary);
    opacity: 0;
    transition: opacity 0.1s ease;
}

.collapsible-item-header:hover .collapsible-item-permalink,
.collapsible-item-header:focus-within .collapsible-item-permalink {
    opacity: 1;
}

.collapsible-item-content {
    overflow: hidden;
}

.collapsible-item-content[data-state='open'] {
    animation: collapsible-in 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes collapsible-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.collapsible-item-content-inner {
    padding-block: 8px 12px;
    color: var(--text-secondary);
}