/* Drawer toggle button with "Controls" text */

#drawer-toggle-btn {
    display: flex;
    flex-direction: row; /* Horizontal layout */
    align-items: center;
    gap: 0.25rem; /* Small gap between text and arrow */
    padding: 0.75rem 0.5rem;
    position: relative;
}

    /* Text appears first (on left) */
    #drawer-toggle-btn span {
        font-size: 0.875rem;
        font-weight: 500;
        white-space: nowrap;
        writing-mode: vertical-rl; /* Vertical text, right-to-left (reads top to bottom) */
        transform: rotate(180deg); /* Flip so it reads bottom to top (like book spine) */
        transition: opacity 0.2s ease;
        letter-spacing: 0.05em; /* Slight spacing for readability */
    }

    /* Icon appears to the right of text */
    #drawer-toggle-btn i {
        transition: transform 0.3s ease;
    }

    #drawer-toggle-btn.drawer-open i {
        transform: rotate(180deg);
    }

    /* Hide text when drawer is open */
    #drawer-toggle-btn.drawer-open span {
        display: none;
    }

    /* Adjust padding when text is hidden */
    #drawer-toggle-btn.drawer-open {
        padding: 0.5rem;
    }

/* Optional: Hide text on very small screens to save space */
@media (max-width: 400px) {
    #drawer-toggle-btn span {
        display: none;
    }

    #drawer-toggle-btn {
        padding: 0.5rem;
    }
}