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


@layer mdc-navigation-bar{._navigation-tab_1sxjx_2{--_active-indicator-color: var(--md-navigation-tab-active-indicator-color, var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8)));--_active-indicator-height: var(--md-navigation-tab-active-indicator-height, var(--md-navigation-bar-active-indicator-height, 32px));--_active-indicator-shape: var(--md-navigation-tab-active-indicator-shape, var(--md-navigation-bar-active-indicator-shape, var(--md-sys-shape-corner-full, 9999px)));--_active-indicator-width: var(--md-navigation-tab-active-indicator-width, var(--md-navigation-bar-active-indicator-width, 64px));--_active-focus-icon-color: var(--md-navigation-tab-active-focus-icon-color, var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b)));--_active-focus-label-text-color: var(--md-navigation-tab-active-focus-label-text-color, var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-focus-state-layer-color: var(--md-navigation-tab-active-focus-state-layer-color, var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-hover-icon-color: var(--md-navigation-tab-active-hover-icon-color, var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b)));--_active-hover-label-text-color: var(--md-navigation-tab-active-hover-label-text-color, var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-hover-state-layer-color: var(--md-navigation-tab-active-hover-state-layer-color, var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-icon-color: var(--md-navigation-tab-active-icon-color, var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b)));--_active-label-text-color: var(--md-navigation-tab-active-label-text-color, var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-label-text-weight: var(--md-navigation-tab-active-label-text-weight, var(--md-navigation-bar-active-label-text-weight, var(--md-sys-typescale-label-medium-weight-prominent, var(--md-ref-typeface-weight-bold, 700))));--_active-pressed-icon-color: var(--md-navigation-tab-active-pressed-icon-color, var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b)));--_active-pressed-label-text-color: var(--md-navigation-tab-active-pressed-label-text-color, var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-pressed-state-layer-color: var(--md-navigation-tab-active-pressed-state-layer-color, var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_container-color: var(--md-navigation-tab-container-color, var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7)));--_container-elevation: var(--md-navigation-tab-container-elevation, var(--md-navigation-bar-container-elevation, 0));--_container-height: var(--md-navigation-tab-container-height, var(--md-navigation-bar-container-height, 80px));--_container-shape: var(--md-navigation-tab-container-shape, var(--md-navigation-bar-container-shape, var(--md-sys-shape-corner-none, 0px)));--_focus-state-layer-opacity: var(--md-navigation-tab-focus-state-layer-opacity, var(--md-navigation-bar-focus-state-layer-opacity, .12));--_hover-state-layer-opacity: var(--md-navigation-tab-hover-state-layer-opacity, var(--md-navigation-bar-hover-state-layer-opacity, .08));--_icon-size: var(--md-navigation-tab-icon-size, var(--md-navigation-bar-icon-size, 24px));--_inactive-focus-icon-color: var(--md-navigation-tab-inactive-focus-icon-color, var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-focus-label-text-color: var(--md-navigation-tab-inactive-focus-label-text-color, var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-focus-state-layer-color: var(--md-navigation-tab-inactive-focus-state-layer-color, var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-hover-icon-color: var(--md-navigation-tab-inactive-hover-icon-color, var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-hover-label-text-color: var(--md-navigation-tab-inactive-hover-label-text-color, var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-hover-state-layer-color: var(--md-navigation-tab-inactive-hover-state-layer-color, var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-icon-color: var(--md-navigation-tab-inactive-icon-color, var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f)));--_inactive-label-text-color: var(--md-navigation-tab-inactive-label-text-color, var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f)));--_inactive-pressed-icon-color: var(--md-navigation-tab-inactive-pressed-icon-color, var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-pressed-label-text-color: var(--md-navigation-tab-inactive-pressed-label-text-color, var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-pressed-state-layer-color: var(--md-navigation-tab-inactive-pressed-state-layer-color, var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_label-text-font: var(--md-navigation-tab-label-text-font, var(--md-navigation-bar-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto))));--_label-text-line-height: var(--md-navigation-tab-label-text-line-height, var(--md-navigation-bar-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem)));--_label-text-size: var(--md-navigation-tab-label-text-size, var(--md-navigation-bar-label-text-size, var(--md-sys-typescale-label-medium-size, .75rem)));--_label-text-tracking: var(--md-navigation-tab-label-text-tracking, var(--md-navigation-bar-label-text-tracking, ));--_label-text-type: var(--md-navigation-tab-label-text-type, var(--md-navigation-bar-label-text-type, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-medium-size, .75rem) / var(--md-sys-typescale-label-medium-line-height, 1rem) var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto))));--_label-text-weight: var(--md-navigation-tab-label-text-weight, var(--md-navigation-bar-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500))));--_pressed-state-layer-opacity: var(--md-navigation-tab-pressed-state-layer-opacity, var(--md-navigation-bar-pressed-state-layer-opacity, .12))}._navigation-tab_1sxjx_2 [data-component=focus-ring]{--md-focus-ring-shape: var(--md-sys-shape-corner-small, 8px);--md-focus-ring-inward-offset: -1px}._navigation-tab_1sxjx_2{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;box-sizing:border-box;cursor:pointer;display:flex;flex-grow:1;flex-direction:column;height:100%;justify-content:center;min-height:48px;min-width:48px;outline:none;padding:8px 0 12px;position:relative;text-align:center;width:100%;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);text-transform:inherit}._navigation-tab_1sxjx_2::-moz-focus-inner{border:0;padding:0}._navigation-tab_1sxjx_2 ._icon-content_1sxjx_78{align-items:center;box-sizing:border-box;display:flex;justify-content:center;position:relative;z-index:1}._navigation-tab_1sxjx_2 ._label_1sxjx_86{height:16px;margin-top:4px;opacity:1;transition:opacity .2s cubic-bezier(.4,0,.2,1),height .2s cubic-bezier(.4,0,.2,1);z-index:1}._navigation-tab_1sxjx_2 ._label--hide-inactive-label_1sxjx_93:not([active-navigation-tab]) ._navigation-tab_1sxjx_2 ._label_1sxjx_86{height:0;opacity:0}._navigation-tab_1sxjx_2 ._active-indicator_1sxjx_97{display:flex;justify-content:center;opacity:0;position:absolute;transition:width .2s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1);width:32px;background-color:var(--_active-indicator-color);border-radius:var(--_active-indicator-shape)}._navigation-tab_1sxjx_2[active-navigation-tab] ._active-indicator_1sxjx_97{opacity:1}._navigation-tab_1sxjx_2 ._active-indicator_1sxjx_97,._navigation-tab_1sxjx_2 ._icon-content_1sxjx_78{height:var(--_active-indicator-height)}._navigation-tab_1sxjx_2[active-navigation-tab] ._active-indicator_1sxjx_97,._navigation-tab_1sxjx_2 ._icon-content_1sxjx_78{width:var(--_active-indicator-width)}._navigation-tab_1sxjx_2 ._icon_1sxjx_78{fill:currentColor;align-self:center;display:inline-block;position:relative;width:var(--_icon-size);height:var(--_icon-size);font-size:var(--_icon-size)}._navigation-tab_1sxjx_2 ._icon_1sxjx_78._icon--active_1sxjx_125{display:none}._navigation-tab_1sxjx_2 [data-component=ripple]{z-index:0}._navigation-tab_1sxjx_2[active-navigation-tab]{--md-ripple-hover-color: var(--_active-hover-state-layer-color);--md-ripple-pressed-color: var(--_active-pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}._navigation-tab_1sxjx_2[active-navigation-tab] ._icon_1sxjx_78{display:none;color:var(--_active-icon-color)}._navigation-tab_1sxjx_2[active-navigation-tab] ._icon--active_1sxjx_125{display:inline-block}._navigation-tab_1sxjx_2[active-navigation-tab] ._label_1sxjx_86{color:var(--_active-label-text-color)}._navigation-tab_1sxjx_2[active-navigation-tab]:hover ._icon_1sxjx_78{color:var(--_active-hover-icon-color)}._navigation-tab_1sxjx_2[active-navigation-tab]:hover ._label_1sxjx_86{color:var(--_active-hover-label-text-color)}._navigation-tab_1sxjx_2[active-navigation-tab]:focus ._icon_1sxjx_78{color:var(--_active-focus-icon-color)}._navigation-tab_1sxjx_2[active-navigation-tab]:focus ._label_1sxjx_86{color:var(--_active-focus-label-text-color)}._navigation-tab_1sxjx_2[active-navigation-tab]:active ._icon_1sxjx_78{color:var(--_active-pressed-icon-color)}._navigation-tab_1sxjx_2[active-navigation-tab]:active ._label_1sxjx_86{color:var(--_active-pressed-label-text-color)}._navigation-tab_1sxjx_2:not([active-navigation-tab]){--md-ripple-hover-color: var(--_inactive-hover-state-layer-color);--md-ripple-pressed-color: var(--_inactive-pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}._navigation-tab_1sxjx_2:not([active-navigation-tab]) ._icon_1sxjx_78{color:var(--_inactive-icon-color)}._navigation-tab_1sxjx_2:not([active-navigation-tab]) ._label_1sxjx_86{color:var(--_inactive-label-text-color)}._navigation-tab_1sxjx_2:not([active-navigation-tab]):hover ._icon_1sxjx_78{color:var(--_inactive-hover-icon-color)}._navigation-tab_1sxjx_2:not([active-navigation-tab]):hover ._label_1sxjx_86{color:var(--_inactive-hover-label-text-color)}._navigation-tab_1sxjx_2:not([active-navigation-tab]):focus ._icon_1sxjx_78{color:var(--_inactive-focus-icon-color)}._navigation-tab_1sxjx_2:not([active-navigation-tab]):focus ._label_1sxjx_86{color:var(--_inactive-focus-label-text-color)}._navigation-tab_1sxjx_2:not([active-navigation-tab]):active ._icon_1sxjx_78{color:var(--_inactive-pressed-icon-color)}._navigation-tab_1sxjx_2:not([active-navigation-tab]):active ._label_1sxjx_86{color:var(--_inactive-pressed-label-text-color)}._navigation-tab_1sxjx_2[hide-inactive-label]:not([active-navigation-tab]) ._label_1sxjx_86{display:none}}