/* ========================================
   Folder Component - Compositional
   Uses collapsible-section as base
   ======================================== */

.folder {
    cursor: pointer;  /* Clickable to expand/collapse */
}

.folder-items {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Space between items for active state breathing room */
    padding-inline-end: 12px;
    padding-block: 8px; /* Top and bottom padding inside folder */
    /*
     * Smart alignment: all items inside folder align with folder title
     * Header padding (16px) + chevron width (6px) + chevron margin (4px) + gap (6px) = 32px where title starts
     * Container padding positions ALL children, so children need NO left padding
     */
    padding-inline-start: calc(16px + 6px + 4px + 6px);
}

.folder-items > * {
    /* Remove left padding from all children - container handles positioning */
    padding-inline-start: 0 !important;
}

.folder-item {
    /* Vertical and right padding only - left is controlled by container */
    padding-block: 8px;
    padding-inline-end: 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    /* cursor handled by GSAP Draggable during drag */
    transition: background 0.2s, color 0.2s;
    user-select: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.folder-item:hover {
    background: var(--interactive-hover);
    color: var(--text-primary);
}

.folder-item.current {
    background: var(--interactive-selected);
    color: var(--blue-primary);
}

/* Disable hover during reordering */
.is-reordering .folder:hover,
.is-reordering .folder-item:hover {
    background: transparent !important;
}