/* Expandable LAYOUT rows (issue #802): the fold chevron on a Layout's own
 * drawer row and the extra indent level for its member sessions once
 * expanded. Markup: web/src/lib/drawer/layouts-*.ts.
 *
 * THE CHEVRON REUSES THE SHARED GLYPH AND ROTATION RULE
 * (`.session-sidebar-group__chevron`, `session-sidebar-groups.css`), so it
 * points the same way and animates the same way every other drawer fold
 * does; only ITS OWN button wrapper is new, sized to sit inline on a
 * session row instead of stretching to fill a header's full width the way
 * `.session-sidebar-group__header` does.
 *
 * THE MEMBER BODY REUSES `.session-sidebar-group__body` (a project or
 * group's own body class) for the SAME one-level indent
 * (`session-sidebar-band-structure.css`'s `.session-sidebar-group__body >
 * .session-sidebar-row` rule already fires on it); `.session-sidebar-layout__members`
 * layers one MORE indent level on top, since a member row nests one level
 * deeper than the Layout row that lists it - loaded after that file so its
 * equal-specificity override wins.
 *
 * Must load AFTER session-sidebar-groups.css (the chevron glyph and its
 * rotation rule) and session-sidebar-band-structure.css (the one-level
 * indent this doubles).
 */

@layer components {
.session-sidebar-layout__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--oc-radius-sm);
    color: var(--oc-text-secondary);
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
}

.session-sidebar-layout__toggle:hover,
.session-sidebar-layout__toggle:focus-visible {
    color: var(--oc-orange);
    background: var(--oc-ground-hover);
    outline: none;
}

/* Same glyph, same rotation-on-expand rule as every other drawer fold,
 * keyed off THIS button's own `aria-expanded` rather than
 * `.session-sidebar-group__header`'s. */
.session-sidebar-layout__toggle[aria-expanded="true"] .session-sidebar-group__chevron {
    transform: rotate(90deg);
}

/* A collapsed member body is EMPTY, not hidden - same contract as
 * `session-sidebar-groups.css`'s `.session-sidebar-group[data-collapsed="1"]
 * .session-sidebar-group__body`: the element stays so `aria-controls`
 * still resolves, the rows are simply not rendered into it. Nothing
 * extra is needed here since an empty block already collapses to zero
 * height on its own. */

/* A member session sits one tree step under its Layout: the `.session-sidebar-layout__members` body rule in
 * session-sidebar-band-structure.css is the only indent. */
}