/* Used in: 
 * - Modal overlays: app/views/layouts/_remote_modal.html.erb, app/views/shared/_form_modal.html.erb, app/views/messages/actions.html.erb (scrim class)
 * - Drawer links generated by drawer_link_tag helper in app/helpers/navigation_helper.rb
 * - Currently rendered in: app/views/navigation/_user_links.html.erb (drawer-link class via helper)
 * Note: xdrawer-left class appears to be unused currently
 */

.xdrawer-left {
    position: fixed;
    top: 0;
    left: 0;
    width: min(85%, var(--size-xs));
    height: 100%;
    font-size: 14px;
    background: var(--layer-surface-container);
    color: var(--on-surface-variant);
    border-top-right-radius: var(--radius-large);
    border-bottom-right-radius: var(--radius-large);
    padding: 12px;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: var(--layer-modal); /* Ensure it appears above the scrim */
    .drawer-link {
        display: flex;
        align-items: center;
        justify-items: start;
        color: var(--on-surface-variant);
        text-decoration: none;
        height: 48px;
        padding-inline-start: 16px;
        padding-inline-end: 24px;
        border-radius: var(--radius-full);
        svg {
            height: 24px;
            width: 24px;
            margin-right: 12px;
        }
    }
    h2 {
        color: var(--on-surface-variant);
        font-weight: 500;
        line-height: 20px;
    }
}
.drawer-link:hover,
.drawer-link:focus {
    background-color: var(--on-secondary-container-transparent);
}
.drawer-link.active {
    background-color: var(--secondary-container);
}
.drawer.active {
    transform: translateX(0);
}
@media (min-width: 40em) {
    .drawer-toggle {
        display: none;
    }
    .margin-start-drawer {
        margin-left: var(--size-xs);
    }
}

.scrim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
    z-index: var(--layer-scrim); /* Slightly below the drawer */
}

.scrim.active {
    opacity: 1;
    visibility: visible;
}