/* ============================================================
   RIGHT RAIL
   ============================================================ */

.right-rail {
    background: var(--color-bg);
    border-inline-start: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-2) 0;
    gap: var(--space-2);
    z-index: 5;
}

.panel-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rail-btn {
    --btn-fg: var(--color-text-muted);

    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--btn-fg);
    background: transparent;
    border: none;
    cursor: pointer;
}

.rail-btn:hover:not(:disabled) {
    color: --lighter(var(--btn-fg), 0.24);
    background: --tint(var(--btn-fg), 0.12);
}

.rail-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.right-rail .rail-btn[aria-pressed="true"] {
    --btn-fg: var(--color-primary);

    color: var(--btn-fg);
    background: --tint(var(--btn-fg), 0.12);
}

.right-rail .rail-btn[aria-pressed="true"]:hover:not(:disabled) {
    color: --lighter(var(--color-primary), 0.2);
    background: --tint(var(--btn-fg), 0.22);
}

.rail-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.rail-spacer {
    flex: 1;
}

.rail-divider {
    width: 32px;
    height: 2px;
    border: 0;
    border-radius: 1px;
    background: var(--color-border);
    margin: var(--space-1) 0;
    flex: 0 0 auto;
    opacity: 0.5;
}

.rail-btn--download {
    anchor-name: --download-anchor;
}