@sandlada/vue-mdc/build/css/navigation-drawer.css


@layer mdc-navigation-drawer{@layer shared{._navigation-drawer-component-styles_x0lem_3._standard_x0lem_3{position:relative}._navigation-drawer-component-styles_x0lem_3._modal_x0lem_6{position:fixed}._navigation-drawer-component-styles_x0lem_3._standard_x0lem_3:has(dialog._dialog_x0lem_9[open]) ._scrim_x0lem_9{display:none}._navigation-drawer-component-styles_x0lem_3._modal_x0lem_6:has(dialog._dialog_x0lem_9[open]) ._scrim_x0lem_9{display:flex}._navigation-drawer-component-styles_x0lem_3._standard_x0lem_3 ._container_x0lem_15 ._background_x0lem_15{background:var(--md-navigation-drawer-standard-container-color, var(--md-sys-color-surface, #fef7ff))}._navigation-drawer-component-styles_x0lem_3._modal_x0lem_6 ._container_x0lem_15 ._background_x0lem_15{background:var(--md-navigation-drawer-modal-container-color, var(--md-sys-color-surface-container-low, #f7f2fa))}._navigation-drawer-component-styles_x0lem_3._standard_x0lem_3 ._scrim_x0lem_9{position:absolute}._navigation-drawer-component-styles_x0lem_3._modal_x0lem_6 ._scrim_x0lem_9{position:fixed}._navigation-drawer-component-styles_x0lem_3{--_active-indicator-color: var(--md-navigation-drawer-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8));--_active-focus-icon-color: var(--md-navigation-drawer-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-focus-label-text-color: var(--md-navigation-drawer-active-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-focus-state-layer-color: var(--md-navigation-drawer-active-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-hover-icon-color: var(--md-navigation-drawer-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-hover-label-text-color: var(--md-navigation-drawer-active-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-hover-state-layer-color: var(--md-navigation-drawer-active-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-icon-color: var(--md-navigation-drawer-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-label-text-color: var(--md-navigation-drawer-active-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-label-text-weight: var(--md-navigation-drawer-active-label-text-weight, var(--md-sys-typescale-label-large-weight-prominent, var(--md-ref-typeface-weight-bold, 700)));--_active-pressed-icon-color: var(--md-navigation-drawer-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-pressed-label-text-color: var(--md-navigation-drawer-active-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-pressed-state-layer-color: var(--md-navigation-drawer-active-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_bottom-container-shape: var(--md-navigation-drawer-bottom-container-shape, var(--md-sys-shape-corner-large, 16px), var(--md-sys-shape-corner-large, 16px), var(--md-sys-shape-corner-none, 0px), var(--md-sys-shape-corner-none, 0px));--_container-height: var(--md-navigation-drawer-container-height, 100%);--_container-shape: var(--md-navigation-drawer-container-shape, var(--md-sys-shape-corner-none, 0px), var(--md-sys-shape-corner-large, 16px), var(--md-sys-shape-corner-large, 16px), var(--md-sys-shape-corner-none, 0px));--_container-width: var(--md-navigation-drawer-container-width, 360px);--_focus-state-layer-opacity: var(--md-navigation-drawer-focus-state-layer-opacity, .12);--_headline-color: var(--md-navigation-drawer-headline-color, var(--md-sys-color-on-surface-variant, #49454f));--_headline-font: var(--md-navigation-drawer-headline-font, var(--md-sys-typescale-title-small-font, var(--md-ref-typeface-plain, Roboto)));--_headline-line-height: var(--md-navigation-drawer-headline-line-height, var(--md-sys-typescale-title-small-line-height, 1.25rem));--_headline-size: var(--md-navigation-drawer-headline-size, var(--md-sys-typescale-title-small-size, .875rem));--_headline-tracking: var(--md-navigation-drawer-headline-tracking, );--_headline-type: var(--md-navigation-drawer-headline-type, var(--md-sys-typescale-title-small-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-title-small-size, .875rem) / var(--md-sys-typescale-title-small-line-height, 1.25rem) var(--md-sys-typescale-title-small-font, var(--md-ref-typeface-plain, Roboto)));--_headline-weight: var(--md-navigation-drawer-headline-weight, var(--md-sys-typescale-title-small-weight, var(--md-ref-typeface-weight-medium, 500)));--_hover-state-layer-opacity: var(--md-navigation-drawer-hover-state-layer-opacity, .08);--_icon-size: var(--md-navigation-drawer-icon-size, 24px);--_inactive-focus-icon-color: var(--md-navigation-drawer-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-label-text-color: var(--md-navigation-drawer-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-state-layer-color: var(--md-navigation-drawer-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-icon-color: var(--md-navigation-drawer-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-label-text-color: var(--md-navigation-drawer-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-state-layer-color: var(--md-navigation-drawer-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-icon-color: var(--md-navigation-drawer-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-label-text-color: var(--md-navigation-drawer-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-pressed-icon-color: var(--md-navigation-drawer-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-label-text-color: var(--md-navigation-drawer-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-state-layer-color: var(--md-navigation-drawer-inactive-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_label-text-font: var(--md-navigation-drawer-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-navigation-drawer-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-navigation-drawer-label-text-size, var(--md-sys-typescale-label-large-size, .875rem));--_label-text-tracking: var(--md-navigation-drawer-label-text-tracking, );--_label-text-type: var(--md-navigation-drawer-label-text-type, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-large-size, .875rem) / var(--md-sys-typescale-label-large-line-height, 1.25rem) var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-weight: var(--md-navigation-drawer-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_large-badge-label-color: var(--md-navigation-drawer-large-badge-label-color, var(--md-sys-color-on-surface-variant, #49454f));--_large-badge-label-font: var(--md-navigation-drawer-large-badge-label-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_large-badge-label-line-height: var(--md-navigation-drawer-large-badge-label-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_large-badge-label-size: var(--md-navigation-drawer-large-badge-label-size, var(--md-sys-typescale-label-large-size, .875rem));--_large-badge-label-tracking: var(--md-navigation-drawer-large-badge-label-tracking, );--_large-badge-label-type: var(--md-navigation-drawer-large-badge-label-type, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-large-size, .875rem) / var(--md-sys-typescale-label-large-line-height, 1.25rem) var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_large-badge-label-weight: var(--md-navigation-drawer-large-badge-label-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_modal-container-color: var(--md-navigation-drawer-modal-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_modal-container-elevation: var(--md-navigation-drawer-modal-container-elevation, 1);--_pressed-state-layer-opacity: var(--md-navigation-drawer-pressed-state-layer-opacity, .12);--_standard-container-color: var(--md-navigation-drawer-standard-container-color, var(--md-sys-color-surface, #fef7ff));--_standard-container-elevation: var(--md-navigation-drawer-standard-container-elevation, 0);--_indicator-height: var(--md-navigation-drawer-indicator-height, 56px);--_indicator-shape: var(--md-navigation-drawer-indicator-shape, var(--md-sys-shape-corner-full, 9999px));--_indicator-width: var(--md-navigation-drawer-indicator-width, 336px);--_container-shape-start-start: var(--md-navigation-drawer-container-shape-start-start, var(--md-navigation-drawer-container-shape, var(--md-sys-shape-corner-none, 0px)));--_container-shape-start-end: var(--md-navigation-drawer-container-shape-start-end, var(--md-navigation-drawer-container-shape, var(--md-sys-shape-corner-large, 16px)));--_container-shape-end-end: var(--md-navigation-drawer-container-shape-end-end, var(--md-navigation-drawer-container-shape, var(--md-sys-shape-corner-large, 16px)));--_container-shape-end-start: var(--md-navigation-drawer-container-shape-end-start, var(--md-navigation-drawer-container-shape, var(--md-sys-shape-corner-none, 0px)));border-start-start-radius:var(--md-navigation-drawer-container-shape-start-start, var(--md-navigation-drawer-container-shape, var(--md-sys-shape-corner-none, 0px)));border-start-end-radius:var(--md-navigation-drawer-container-shape-start-end, var(--md-navigation-drawer-container-shape, var(--md-sys-shape-corner-large, 16px)));border-end-end-radius:var(--md-navigation-drawer-container-shape-end-end, var(--md-navigation-drawer-container-shape, var(--md-sys-shape-corner-large, 16px)));border-end-start-radius:var(--md-navigation-drawer-container-shape-end-start, var(--md-navigation-drawer-container-shape, var(--md-sys-shape-corner-none, 0px)));width:var(--md-navigation-drawer-container-width, 360px);height:var(--md-navigation-drawer-container-height, 100%);display:contents;inset:0;z-index:1;box-sizing:border-box}._navigation-drawer-component-styles_x0lem_3 ._dialog_x0lem_9{position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:0;inline-size:0;box-sizing:border-box;display:none;justify-content:flex-end;background:transparent;border:none;border-radius:inherit;flex-direction:column;margin:inherit;outline:none;overflow:visible;padding:0;height:inherit;width:inherit}._navigation-drawer-component-styles_x0lem_3 ._dialog_x0lem_9[open]{display:flex}._navigation-drawer-component-styles_x0lem_3 ::backdrop{background:none}._navigation-drawer-component-styles_x0lem_3 ._scrim_x0lem_9{background:var(--md-sys-color-scrim, #000);display:none;inset:0;opacity:32%;pointer-events:none;z-index:1}._navigation-drawer-component-styles_x0lem_3 ._container_x0lem_15{border-radius:inherit;box-sizing:border-box;display:flex;flex-direction:column;height:100%;width:100%;overflow-x:hidden;overflow-y:auto;position:relative;padding-block:12px}._navigation-drawer-component-styles_x0lem_3 ._container_x0lem_15>._background_x0lem_15{box-sizing:border-box;position:absolute;inset:0;display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;outline:none;border:none;padding:0;margin:0;height:100%;width:100%;overflow:hidden;border-radius:inherit;z-index:0}._navigation-drawer-component-styles_x0lem_3 ._scroller_x0lem_165{display:flex;flex:1;flex-direction:column;overflow:hidden;z-index:1}._navigation-drawer-component-styles_x0lem_3._scrollable_x0lem_172 ._scroller_x0lem_165{overflow-y:scroll}._navigation-drawer-component-styles_x0lem_3 ._content-wrapper_x0lem_175{flex:1;height:-moz-min-content;height:min-content;position:relative}._navigation-drawer-component-styles_x0lem_3 ._content-wrapper_x0lem_175>._content_x0lem_175{box-sizing:border-box;padding-left:28px;padding-right:28px;display:flex;flex-direction:column;gap:12px}._navigation-drawer-component-styles_x0lem_3 ._anchor_x0lem_188{position:absolute}._navigation-drawer-component-styles_x0lem_3 ._top_x0lem_191._anchor_x0lem_188{top:0}._navigation-drawer-component-styles_x0lem_3 ._bottom_x0lem_194._anchor_x0lem_188{bottom:0}}@layer indicator{._navigation-drawer-indicator-component-styles_x0lem_199{display:flex;flex-direction:row;gap:0;align-items:center;box-sizing:border-box;outline:none;border:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;height:var(--md-navigation-drawer-indicator-height, 56px);width:var(--md-navigation-drawer-indicator-width, 336px);border-radius:var(--md-navigation-drawer-indicator-shape, var(--md-sys-shape-corner-full, 9999px));position:relative;background-color:transparent;cursor:pointer;padding-left:16px;padding-right:24px;margin-left:-16px;margin-right:-16px;--md-ripple-hover-color: var(--md-navigation-drawer-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-color: var(--md-navigation-drawer-inactive-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-hover-opacity: var(--md-navigation-drawer-hover-state-layer-opacity, .08);--md-ripple-pressed-opacity: var(--md-navigation-drawer-pressed-state-layer-opacity, .12);--md-focus-ring-shape-start-start: var(--md-navigation-drawer-container-shape-start-start, var(--md-navigation-drawer-container-shape, var(--md-sys-shape-corner-none, 0px)));--md-focus-ring-shape-start-end: var(--md-navigation-drawer-container-shape-start-end, var(--md-navigation-drawer-container-shape, var(--md-sys-shape-corner-large, 16px)));--md-focus-ring-shape-end-end: var(--md-navigation-drawer-container-shape-end-end, var(--md-navigation-drawer-container-shape, var(--md-sys-shape-corner-large, 16px)));--md-focus-ring-shape-end-start: var(--md-navigation-drawer-container-shape-end-start, var(--md-navigation-drawer-container-shape, var(--md-sys-shape-corner-none, 0px)))}._navigation-drawer-indicator-component-styles_x0lem_199._active_x0lem_227{background-color:var(--md-navigation-drawer-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8));--md-ripple-hover-color: var(--md-navigation-drawer-active-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-pressed-color: var(--md-navigation-drawer-active-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-hover-opacity: var(--md-navigation-drawer-hover-state-layer-opacity, .08);--md-ripple-pressed-opacity: var(--md-navigation-drawer-pressed-state-layer-opacity, .12)}._navigation-drawer-indicator-component-styles_x0lem_199 ._label_x0lem_234{overflow:hidden;font:var(--md-navigation-drawer-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));line-height:var(--md-navigation-drawer-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));size:var(--md-navigation-drawer-label-text-size, var(--md-sys-typescale-label-large-size, .875rem));font-weight:var(--md-navigation-drawer-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));color:var(--md-navigation-drawer-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));margin-left:12px;display:inline-block}._navigation-drawer-indicator-component-styles_x0lem_199:hover ._label_x0lem_234{color:var(--md-navigation-drawer-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20))}._navigation-drawer-indicator-component-styles_x0lem_199:active:hover ._label_x0lem_234{color:var(--md-navigation-drawer-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20))}._navigation-drawer-indicator-component-styles_x0lem_199:focus-within ._label_x0lem_234{color:var(--md-navigation-drawer-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20))}._navigation-drawer-indicator-component-styles_x0lem_199._active_x0lem_227 ._label_x0lem_234{font-weight:var(--md-navigation-drawer-active-label-text-weight, var(--md-sys-typescale-label-large-weight-prominent, var(--md-ref-typeface-weight-bold, 700)));color:var(--md-navigation-drawer-active-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}._navigation-drawer-indicator-component-styles_x0lem_199._active_x0lem_227:hover ._label_x0lem_234{color:var(--md-navigation-drawer-active-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}._navigation-drawer-indicator-component-styles_x0lem_199._active_x0lem_227:active:hover ._label_x0lem_234{color:var(--md-navigation-drawer-active-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}._navigation-drawer-indicator-component-styles_x0lem_199._active_x0lem_227:focus-within ._label_x0lem_234{color:var(--md-navigation-drawer-active-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}._navigation-drawer-indicator-component-styles_x0lem_199 [data-component=icon]{display:inline-flex;position:relative;writing-mode:horizontal-tb;fill:currentColor;flex-shrink:0;font-size:var(--md-navigation-drawer-icon-size, 24px);inline-size:var(--md-navigation-drawer-icon-size, 24px);block-size:var(--md-navigation-drawer-icon-size, 24px);color:var(--md-navigation-drawer-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}._navigation-drawer-indicator-component-styles_x0lem_199:hover [data-component=icon]{color:var(--md-navigation-drawer-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20))}._navigation-drawer-indicator-component-styles_x0lem_199._active_x0lem_227:hover [data-component=icon]{color:var(--md-navigation-drawer-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}._navigation-drawer-indicator-component-styles_x0lem_199:focus-within [data-component=icon]{color:var(--md-navigation-drawer-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20))}._navigation-drawer-indicator-component-styles_x0lem_199._active_x0lem_227 [data-component=icon]{color:var(--md-navigation-drawer-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}._navigation-drawer-indicator-component-styles_x0lem_199:hover [data-component=icon]{color:var(--md-navigation-drawer-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}._navigation-drawer-indicator-component-styles_x0lem_199:active:hover [data-component=icon]{color:var(--md-navigation-drawer-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}._navigation-drawer-indicator-component-styles_x0lem_199._active_x0lem_227:focus-within [data-component=icon]{color:var(--md-navigation-drawer-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}}@layer headline{._navigation-drawer-headline-component-styles_x0lem_300{font:var(--md-navigation-drawer-headline-font, var(--md-sys-typescale-title-small-font, var(--md-ref-typeface-plain, Roboto)));color:var(--md-navigation-drawer-headline-color, var(--md-sys-color-on-surface-variant, #49454f));line-height:var(--md-navigation-drawer-headline-line-height, var(--md-sys-typescale-title-small-line-height, 1.25rem));size:var(--md-navigation-drawer-headline-size, var(--md-sys-typescale-title-small-size, .875rem));font-weight:var(--md-navigation-drawer-headline-weight, var(--md-sys-typescale-title-small-weight, var(--md-ref-typeface-weight-medium, 500)));letter-spacing:var(--md-navigation-drawer-headline-tracking, );display:inline-block;margin-top:16px;margin-bottom:16px}}}