@sandlada/vue-mdc/src/components/labs/navigation-drawer/navigationDrawer.module.css


.container {
    --_navigation-drawer-container-color: var(--glare-ui-navigation-drawer-container-color, var(--_current-navigation-drawer-container-color));
    --_navigation-drawer-standard-container-color: var(--glare-ui-navigation-drawer-standard-container-color, var(--_current-navigation-drawer-standard-container-color, var(--md-sys-color-surface, #fef7ff)));
    --_navigation-drawer-modal-container-color: var(--glare-ui-navigation-drawer-modal-container-color, var(--_current-navigation-drawer-modal-container-color, var(--md-sys-color-surface-container-low, #f7f2fa)));
    --_navigation-drawer-container-height: var(--glare-ui-navigation-drawer-container-height, var(--_current-navigation-drawer-container-height, auto));
    --_navigation-drawer-container-width: var(--glare-ui-navigation-drawer-container-width, var(--_current-navigation-drawer-container-width, 360px));
    
    --_navigation-drawer-start-width: var(--glare-ui-navigation-drawer-start-width, 100%);
    --_navigation-drawer-start-min-height: var(--glare-ui-navigation-drawer-start-min-height, 56px);

    --_navigation-drawer-start-color: var(--glare-ui-navigation-drawer-start-color, var(--md-sys-color-on-surface-variant, #49454f));
    --_navigation-drawer-start-font: var(--glare-ui-navigation-drawer-start-font, "Roboto");
    --_navigation-drawer-start-line-height: var(--glare-ui-navigation-drawer-start-line-height, 20px);
    --_navigation-drawer-start-size: var(--glare-ui-navigation-drawer-start-size, var(--md-sys-typescale-title-small-font-size, 14px));
    --_navigation-drawer-start-letter-spacing: var(--glare-ui-navigation-drawer-start-letter-spacin, var(--md-sys-typescale-title-small-letter-spacing, 0.1px));
    --_navigation-drawer-start-font-weight: var(--glare-ui-navigation-drawer-start-font-weight, var(--md-sys-typescale-title-small-font-weight, 500));
    
    --_navigation-drawer-end-width: var(--glare-ui-navigation-drawer-end-width, 100%);
    --_navigation-drawer-end-min-height: var(--glare-ui-navigation-drawer-end-min-height, 56px);
    --_navigation-drawer-end-color: var(--glare-ui-navigation-drawer-end-color, var(--md-sys-color-on-surface-variant, #49454f));
    --_navigation-drawer-end-font: var(--glare-ui-navigation-drawer-end-font, "Roboto");
    --_navigation-drawer-end-line-height: var(--glare-ui-navigation-drawer-end-line-height, 20px);
    --_navigation-drawer-end-size: var(--glare-ui-navigation-drawer-end-size, var(--md-sys-typescale-title-small-font-size, 14px));
    --_navigation-drawer-end-letter-spacing: var(--glare-ui-navigation-drawer-end-letter-spacin, var(--md-sys-typescale-title-small-letter-spacing, 0.1px));
    --_navigation-drawer-end-font-weight: var(--glare-ui-navigation-drawer-end-font-weight, var(--md-sys-typescale-title-small-font-weight, 500));

    --_navigation-drawer-scrim-color: var(--glare-ui-navigation-drawer-scrim-color, var(--md-sys-color-scrim));

    --_navigation-drawer-container-transition-timing-function: var(--glare-ui-navigation-drawer-container-transition-timing-function, var(--_current-navigation-drawer-container-transition-timing-function));
    --_navigation-drawer-container-transition-duration: var(--glare-ui-navigation-drawer-container-transition-duration, var(--_current-navigation-drawer-container-transition-duration));
    --_navigation-drawer-container-opacity: var(--glare-ui-navigation-drawer-container-opacity, var(--_current-navigation-drawer-container-opacity, 1));
}

.container {
    --_current-navigation-drawer-container-color: var(--_navigation-drawer-standard-container-color);

}
.container.modal {
    --_current-navigation-drawer-container-color: var(--_navigation-drawer-modal-container-color);
}

.container.open {
    --_current-navigation-drawer-container-transition-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1);
    --_current-navigation-drawer-container-transition-duration: 400ms;
    --_current-navigation-drawer-container-opacity: 1;
}
.container.close {
    --_current-navigation-drawer-container-transition-timing-function: cubic-bezier(0.3, 0, 0.8, 0.15);
    --_current-navigation-drawer-container-transition-duration: 200ms;
    --_current-navigation-drawer-container-width: 0;
    --_current-navigation-drawer-container-opacity: 0;
    overflow: hidden;
    padding-left: 0px;
    padding-right: 0px;
}

.container {
    background-color: var(--_navigation-drawer-container-color);
    height: var(--_navigation-drawer-container-height);
    width: var(--_navigation-drawer-container-width);

    display: flex;
    flex-direction: column;
    z-index: 0;

    border-top-left-radius: 0;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 16px;

    padding-left: 12px;
    padding-right: 12px;
    padding-top: 12px;

    transition-property: color, background-color, width, opacity, transform, padding;
    transition-timing-function: var(--_navigation-drawer-container-transition-timing-function);
    transition-duration: var(--_navigation-drawer-container-transition-duration);
    opacity: var(--_navigation-drawer-container-opacity);
}


.content {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    overflow: auto;
    user-select: none;
}

.start {
    color: var(--_navigation-drawer-start-color);
    font-family: var(--_navigation-drawer-start-font);
    line-height: var(--_navigation-drawer-start-line-height);
    font-size: var(--_navigation-drawer-start-size);
    letter-spacing: var(--_navigation-drawer-start-letter-spacing);
    font-weight: var(--_navigation-drawer-start-font-weight);

    width: var(--_navigation-drawer-start-width);
    min-height: var(--_navigation-drawer-start-min-height);

    padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;

    position: relative;
    display: block;

    color: var(--md-sys-color-on-surface);
}

.end {
    color: var(--_navigation-drawer-end-color);
    font-family: var(--_navigation-drawer-end-font);
    line-height: var(--_navigation-drawer-end-line-height);
    font-size: var(--_navigation-drawer-end-size);
    letter-spacing: var(--_navigation-drawer-end-letter-spacing);
    font-weight: var(--_navigation-drawer-end-font-weight);

    width: var(--_navigation-drawer-end-width);
    min-height: var(--_navigation-drawer-end-min-height);


    position: relative;
    display: block;
}

.scrim {
    background-color: var(--_navigation-drawer-scrim-color);
    width: 100%;
    height: 100%;
    position: fixed;
    inset: 0;
    padding: 0;
    margin: 0;
    z-index: -1;
}

.container.open :is(.scrim) {
    opacity: 0.25;
}
.container.close :is(.scrim) {
    opacity: 0;
    pointer-events: none;
}

.container.open,
.container.open :is(.content, .start, .end) {
    z-index: 1;
}