UNPKG

@sandlada/vue-mdc

Version:

![Vue MDC Logo](https://raw.githubusercontent.com/sandlada/vue-mdc/refs/heads/main/docs/vue-mdc-cover.png)

2 lines (1 loc) 34 kB
@layer mdc-button{@layer shared{._filled_xni7h_3,._filled-tonal_xni7h_4,._elevated_xni7h_5,._outlined_xni7h_6,._text_xni7h_7{all:unset;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);box-sizing:border-box;cursor:pointer;display:inline-flex;gap:8px;min-height:var(--_container-height);outline:none;padding-block:calc((var(--_container-height) - max(var(--_label-text-line-height),var(--_icon-size))) / 2);padding-inline-start:var(--_leading-space);padding-inline-end:var(--_trailing-space);place-content:center;place-items:center;position:relative;z-index:0;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-overflow:ellipsis;text-wrap:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;vertical-align:top}._filled_xni7h_3:is([disabled],._disabled_xni7h_36),._filled-tonal_xni7h_4:is([disabled],._disabled_xni7h_36),._elevated_xni7h_5:is([disabled],._disabled_xni7h_36),._outlined_xni7h_6:is([disabled],._disabled_xni7h_36),._text_xni7h_7:is([disabled],._disabled_xni7h_36){cursor:default;pointer-events:none}._filled_xni7h_3 ._button_xni7h_44,._filled-tonal_xni7h_4 ._button_xni7h_44,._elevated_xni7h_5 ._button_xni7h_44,._outlined_xni7h_6 ._button_xni7h_44,._text_xni7h_7 ._button_xni7h_44{border-radius:inherit;cursor:inherit;display:inline-flex;align-items:center;justify-content:center;border:none;outline:none;-webkit-appearance:none;vertical-align:middle;background:transparent;text-decoration:none;min-width:calc(64px - var(--_leading-space) - var(--_trailing-space));width:100%;z-index:0;height:100%;font:inherit;color:var(--_label-text-color);padding:0;gap:inherit;text-transform:inherit}._filled_xni7h_3 ._button_xni7h_44::-moz-focus-inner,._filled-tonal_xni7h_4 ._button_xni7h_44::-moz-focus-inner,._elevated_xni7h_5 ._button_xni7h_44::-moz-focus-inner,._outlined_xni7h_6 ._button_xni7h_44::-moz-focus-inner,._text_xni7h_7 ._button_xni7h_44::-moz-focus-inner{padding:0;border:0}._filled_xni7h_3:hover ._button_xni7h_44,._filled-tonal_xni7h_4:hover ._button_xni7h_44,._elevated_xni7h_5:hover ._button_xni7h_44,._outlined_xni7h_6:hover ._button_xni7h_44,._text_xni7h_7:hover ._button_xni7h_44{color:var(--_hover-label-text-color)}._filled_xni7h_3:focus-within ._button_xni7h_44,._filled-tonal_xni7h_4:focus-within ._button_xni7h_44,._elevated_xni7h_5:focus-within ._button_xni7h_44,._outlined_xni7h_6:focus-within ._button_xni7h_44,._text_xni7h_7:focus-within ._button_xni7h_44{color:var(--_focus-label-text-color)}._filled_xni7h_3:active ._button_xni7h_44,._filled-tonal_xni7h_4:active ._button_xni7h_44,._elevated_xni7h_5:active ._button_xni7h_44,._outlined_xni7h_6:active ._button_xni7h_44,._text_xni7h_7:active ._button_xni7h_44{color:var(--_pressed-label-text-color)}._filled_xni7h_3 ._background_xni7h_99,._filled-tonal_xni7h_4 ._background_xni7h_99,._elevated_xni7h_5 ._background_xni7h_99,._outlined_xni7h_6 ._background_xni7h_99,._text_xni7h_7 ._background_xni7h_99{background-color:var(--_container-color);border-radius:inherit;inset:0;position:absolute;z-index:-1}._filled_xni7h_3 ._label_xni7h_110,._filled-tonal_xni7h_4 ._label_xni7h_110,._elevated_xni7h_5 ._label_xni7h_110,._outlined_xni7h_6 ._label_xni7h_110,._text_xni7h_7 ._label_xni7h_110{overflow:hidden}._filled_xni7h_3:is(._button_xni7h_44,._label_xni7h_110,._label_xni7h_110 *),._filled-tonal_xni7h_4:is(._button_xni7h_44,._label_xni7h_110,._label_xni7h_110 *),._elevated_xni7h_5:is(._button_xni7h_44,._label_xni7h_110,._label_xni7h_110 *),._outlined_xni7h_6:is(._button_xni7h_44,._label_xni7h_110,._label_xni7h_110 *),._text_xni7h_7:is(._button_xni7h_44,._label_xni7h_110,._label_xni7h_110 *){text-overflow:inherit}._filled_xni7h_3:is([disabled],._disabled_xni7h_36) ._label_xni7h_110,._filled-tonal_xni7h_4:is([disabled],._disabled_xni7h_36) ._label_xni7h_110,._elevated_xni7h_5:is([disabled],._disabled_xni7h_36) ._label_xni7h_110,._outlined_xni7h_6:is([disabled],._disabled_xni7h_36) ._label_xni7h_110,._text_xni7h_7:is([disabled],._disabled_xni7h_36) ._label_xni7h_110{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}._filled_xni7h_3:is([disabled],._disabled_xni7h_36) ._background_xni7h_99,._filled-tonal_xni7h_4:is([disabled],._disabled_xni7h_36) ._background_xni7h_99,._elevated_xni7h_5:is([disabled],._disabled_xni7h_36) ._background_xni7h_99,._outlined_xni7h_6:is([disabled],._disabled_xni7h_36) ._background_xni7h_99,._text_xni7h_7:is([disabled],._disabled_xni7h_36) ._background_xni7h_99{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}@media (forced-colors: active){._filled_xni7h_3 ._background_xni7h_99,._filled-tonal_xni7h_4 ._background_xni7h_99,._elevated_xni7h_5 ._background_xni7h_99,._outlined_xni7h_6 ._background_xni7h_99,._text_xni7h_7 ._background_xni7h_99{border:1px solid CanvasText}._filled_xni7h_3:is([disabled],._disabled_xni7h_36),._filled-tonal_xni7h_4:is([disabled],._disabled_xni7h_36),._elevated_xni7h_5:is([disabled],._disabled_xni7h_36),._outlined_xni7h_6:is([disabled],._disabled_xni7h_36),._text_xni7h_7:is([disabled],._disabled_xni7h_36){--_disabled-icon-color: GrayText;--_disabled-icon-opacity: 1;--_disabled-container-opacity: 1;--_disabled-label-text-color: GrayText;--_disabled-label-text-opacity: 1}}._filled_xni7h_3:has([data-component=icon])._left_xni7h_160,._filled-tonal_xni7h_4:has([data-component=icon])._left_xni7h_160,._elevated_xni7h_5:has([data-component=icon])._left_xni7h_160,._outlined_xni7h_6:has([data-component=icon])._left_xni7h_160,._text_xni7h_7:has([data-component=icon])._left_xni7h_160{padding-inline-start:var(--_with-leading-icon-leading-space);padding-inline-end:var(--_with-leading-icon-trailing-space)}._filled_xni7h_3:has([data-component=icon])._right_xni7h_168,._filled-tonal_xni7h_4:has([data-component=icon])._right_xni7h_168,._elevated_xni7h_5:has([data-component=icon])._right_xni7h_168,._outlined_xni7h_6:has([data-component=icon])._right_xni7h_168,._text_xni7h_7:has([data-component=icon])._right_xni7h_168{padding-inline-start:var(--_with-trailing-icon-leading-space);padding-inline-end:var(--_with-trailing-icon-trailing-space)}._filled_xni7h_3 ._touch_xni7h_176,._filled-tonal_xni7h_4 ._touch_xni7h_176,._elevated_xni7h_5 ._touch_xni7h_176,._outlined_xni7h_6 ._touch_xni7h_176,._text_xni7h_7 ._touch_xni7h_176{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}._filled_xni7h_3[touch-target=wrapper],._filled-tonal_xni7h_4[touch-target=wrapper],._elevated_xni7h_5[touch-target=wrapper],._outlined_xni7h_6[touch-target=wrapper],._text_xni7h_7[touch-target=wrapper]{margin:max(0px,(48px - var(--_container-height)) / 2) 0}._filled_xni7h_3[touch-target=none] ._touch_xni7h_176,._filled-tonal_xni7h_4[touch-target=none] ._touch_xni7h_176,._elevated_xni7h_5[touch-target=none] ._touch_xni7h_176,._outlined_xni7h_6[touch-target=none] ._touch_xni7h_176,._text_xni7h_7[touch-target=none] ._touch_xni7h_176{display:none}._filled_xni7h_3 :is(._touch_xni7h_176,._label_xni7h_110,._background_xni7h_99,._button_xni7h_44,._outline_xni7h_6),._filled-tonal_xni7h_4 :is(._touch_xni7h_176,._label_xni7h_110,._background_xni7h_99,._button_xni7h_44,._outline_xni7h_6),._elevated_xni7h_5 :is(._touch_xni7h_176,._label_xni7h_110,._background_xni7h_99,._button_xni7h_44,._outline_xni7h_6),._outlined_xni7h_6 :is(._touch_xni7h_176,._label_xni7h_110,._background_xni7h_99,._button_xni7h_44,._outline_xni7h_6),._text_xni7h_7 :is(._touch_xni7h_176,._label_xni7h_110,._background_xni7h_99,._button_xni7h_44,._outline_xni7h_6){pointer-events:none}@layer icon{._filled_xni7h_3 [data-component=icon],._filled-tonal_xni7h_4 [data-component=icon],._elevated_xni7h_5 [data-component=icon],._outlined_xni7h_6 [data-component=icon],._text_xni7h_7 [data-component=icon]{display:inline-flex;position:relative;writing-mode:horizontal-tb;fill:currentColor;flex-shrink:0;color:var(--_icon-color);font-size:var(--_icon-size);inline-size:var(--_icon-size);block-size:var(--_icon-size);--md-icon-size: var(--_icon-size)}._filled_xni7h_3:hover [data-component=icon],._filled-tonal_xni7h_4:hover [data-component=icon],._elevated_xni7h_5:hover [data-component=icon],._outlined_xni7h_6:hover [data-component=icon],._text_xni7h_7:hover [data-component=icon]{color:var(--_hover-icon-color)}._filled_xni7h_3:focus-within [data-component=icon],._filled-tonal_xni7h_4:focus-within [data-component=icon],._elevated_xni7h_5:focus-within [data-component=icon],._outlined_xni7h_6:focus-within [data-component=icon],._text_xni7h_7:focus-within [data-component=icon]{color:var(--_focus-icon-color)}._filled_xni7h_3:active [data-component=icon],._filled-tonal_xni7h_4:active [data-component=icon],._elevated_xni7h_5:active [data-component=icon],._outlined_xni7h_6:active [data-component=icon],._text_xni7h_7:active [data-component=icon]{color:var(--_pressed-icon-color)}._filled_xni7h_3[disabled] [data-component=icon],._filled-tonal_xni7h_4[disabled] [data-component=icon],._elevated_xni7h_5[disabled] [data-component=icon],._outlined_xni7h_6[disabled] [data-component=icon],._text_xni7h_7[disabled] [data-component=icon]{color:var(--_disabled-icon-color);opacity:var(--_disabled-icon-opacity)}}@layer elevation{._filled_xni7h_3 [data-component=elevation],._filled-tonal_xni7h_4 [data-component=elevation],._elevated_xni7h_5 [data-component=elevation]{transition-duration:.28s}._filled_xni7h_3[disabled] [data-component=elevation],._filled-tonal_xni7h_4[disabled] [data-component=elevation],._elevated_xni7h_5[disabled] [data-component=elevation]{transition:none}._filled_xni7h_3 [data-component=elevation],._filled-tonal_xni7h_4 [data-component=elevation],._elevated_xni7h_5 [data-component=elevation]{--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color)}._filled_xni7h_3:focus-within [data-component=elevation],._filled-tonal_xni7h_4:focus-within [data-component=elevation],._elevated_xni7h_5:focus-within [data-component=elevation]{--md-elevation-level: var(--_focus-container-elevation)}._filled_xni7h_3:hover [data-component=elevation],._filled-tonal_xni7h_4:hover [data-component=elevation],._elevated_xni7h_5:hover [data-component=elevation]{--md-elevation-level: var(--_hover-container-elevation)}._filled_xni7h_3:active [data-component=elevation],._filled-tonal_xni7h_4:active [data-component=elevation],._elevated_xni7h_5:active [data-component=elevation]{--md-elevation-level: var(--_pressed-container-elevation)}._filled_xni7h_3[disabled] [data-component=elevation],._filled-tonal_xni7h_4[disabled] [data-component=elevation],._elevated_xni7h_5[disabled] [data-component=elevation]{--md-elevation-level: var(--_disabled-container-elevation)}}@layer ripple{._filled_xni7h_3,._filled-tonal_xni7h_4,._elevated_xni7h_5,._outlined_xni7h_6,._text_xni7h_7{--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}}@layer focus-ring{._filled_xni7h_3,._filled-tonal_xni7h_4,._elevated_xni7h_5,._outlined_xni7h_6,._text_xni7h_7{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}}}@layer appearance{@layer filled{._filled_xni7h_3{--_container-color: var(--md-filled-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-elevation: var(--md-filled-button-container-elevation, 0);--_container-height: var(--md-filled-button-container-height, 40px);--_container-shadow-color: var(--md-filled-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_disabled-container-color: var(--md-filled-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-filled-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-filled-button-disabled-container-opacity, .12);--_disabled-label-text-color: var(--md-filled-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-button-disabled-label-text-opacity, .38);--_focus-container-elevation: var(--md-filled-button-focus-container-elevation, 0);--_focus-label-text-color: var(--md-filled-button-focus-label-text-color, var(--md-sys-color-on-primary, #fff));--_hover-container-elevation: var(--md-filled-button-hover-container-elevation, 1);--_hover-label-text-color: var(--md-filled-button-hover-label-text-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-button-hover-state-layer-opacity, .08);--_label-text-color: var(--md-filled-button-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-text-font: var(--md-filled-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-filled-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-filled-button-label-text-size, var(--md-sys-typescale-label-large-size, .875rem));--_label-text-weight: var(--md-filled-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-container-elevation: var(--md-filled-button-pressed-container-elevation, 0);--_pressed-label-text-color: var(--md-filled-button-pressed-label-text-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-button-pressed-state-layer-opacity, .12);--_disabled-icon-color: var(--md-filled-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-button-disabled-icon-opacity, .38);--_focus-icon-color: var(--md-filled-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-icon-color: var(--md-filled-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-color: var(--md-filled-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-button-icon-size, 18px);--_pressed-icon-color: var(--md-filled-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_container-shape-start-start: var(--md-filled-button-container-shape-start-start, var(--md-filled-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-button-container-shape-start-end, var(--md-filled-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-button-container-shape-end-end, var(--md-filled-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-button-container-shape-end-start, var(--md-filled-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_leading-space: var(--md-filled-button-leading-space, 24px);--_trailing-space: var(--md-filled-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-filled-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-filled-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-filled-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-filled-button-with-trailing-icon-trailing-space, 16px)}}@layer filled-tonal{._filled-tonal_xni7h_4{--_container-color: var(--md-filled-tonal-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-elevation: var(--md-filled-tonal-button-container-elevation, 0);--_container-height: var(--md-filled-tonal-button-container-height, 40px);--_container-shadow-color: var(--md-filled-tonal-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_disabled-container-color: var(--md-filled-tonal-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-filled-tonal-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-filled-tonal-button-disabled-container-opacity, .12);--_disabled-label-text-color: var(--md-filled-tonal-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-tonal-button-disabled-label-text-opacity, .38);--_focus-container-elevation: var(--md-filled-tonal-button-focus-container-elevation, 0);--_focus-label-text-color: var(--md-filled-tonal-button-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-container-elevation: var(--md-filled-tonal-button-hover-container-elevation, 1);--_hover-label-text-color: var(--md-filled-tonal-button-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-filled-tonal-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-filled-tonal-button-hover-state-layer-opacity, .08);--_label-text-color: var(--md-filled-tonal-button-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_label-text-font: var(--md-filled-tonal-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-filled-tonal-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-filled-tonal-button-label-text-size, var(--md-sys-typescale-label-large-size, .875rem));--_label-text-weight: var(--md-filled-tonal-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-container-elevation: var(--md-filled-tonal-button-pressed-container-elevation, 0);--_pressed-label-text-color: var(--md-filled-tonal-button-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-filled-tonal-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filled-tonal-button-pressed-state-layer-opacity, .12);--_disabled-icon-color: var(--md-filled-tonal-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-tonal-button-disabled-icon-opacity, .38);--_focus-icon-color: var(--md-filled-tonal-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-icon-color: var(--md-filled-tonal-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-color: var(--md-filled-tonal-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-size: var(--md-filled-tonal-button-icon-size, 18px);--_pressed-icon-color: var(--md-filled-tonal-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_container-shape-start-start: var(--md-filled-tonal-button-container-shape-start-start, var(--md-filled-tonal-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-tonal-button-container-shape-start-end, var(--md-filled-tonal-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-tonal-button-container-shape-end-end, var(--md-filled-tonal-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-tonal-button-container-shape-end-start, var(--md-filled-tonal-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_leading-space: var(--md-filled-tonal-button-leading-space, 24px);--_trailing-space: var(--md-filled-tonal-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-filled-tonal-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-filled-tonal-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-filled-tonal-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-filled-tonal-button-with-trailing-icon-trailing-space, 16px)}}@layer elevated{._elevated_xni7h_5{--_container-color: var(--md-elevated-button-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_container-elevation: var(--md-elevated-button-container-elevation, 1);--_container-height: var(--md-elevated-button-container-height, 40px);--_container-shadow-color: var(--md-elevated-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_disabled-container-color: var(--md-elevated-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-elevated-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-elevated-button-disabled-container-opacity, .12);--_disabled-label-text-color: var(--md-elevated-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-elevated-button-disabled-label-text-opacity, .38);--_focus-container-elevation: var(--md-elevated-button-focus-container-elevation, 1);--_focus-label-text-color: var(--md-elevated-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-container-elevation: var(--md-elevated-button-hover-container-elevation, 2);--_hover-label-text-color: var(--md-elevated-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-elevated-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-elevated-button-hover-state-layer-opacity, .08);--_label-text-color: var(--md-elevated-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-elevated-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-elevated-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-elevated-button-label-text-size, var(--md-sys-typescale-label-large-size, .875rem));--_label-text-weight: var(--md-elevated-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-container-elevation: var(--md-elevated-button-pressed-container-elevation, 1);--_pressed-label-text-color: var(--md-elevated-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-elevated-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-elevated-button-pressed-state-layer-opacity, .12);--_disabled-icon-color: var(--md-elevated-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-elevated-button-disabled-icon-opacity, .38);--_focus-icon-color: var(--md-elevated-button-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-icon-color: var(--md-elevated-button-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-color: var(--md-elevated-button-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-elevated-button-icon-size, 18px);--_pressed-icon-color: var(--md-elevated-button-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-elevated-button-container-shape-start-start, var(--md-elevated-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-elevated-button-container-shape-start-end, var(--md-elevated-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-elevated-button-container-shape-end-end, var(--md-elevated-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-elevated-button-container-shape-end-start, var(--md-elevated-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_leading-space: var(--md-elevated-button-leading-space, 24px);--_trailing-space: var(--md-elevated-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-elevated-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-elevated-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-elevated-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-elevated-button-with-trailing-icon-trailing-space, 16px)}}@layer outlined{._outlined_xni7h_6{--_container-height: var(--md-outlined-button-container-height, 40px);--_disabled-label-text-color: var(--md-outlined-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-outlined-button-disabled-label-text-opacity, .38);--_disabled-outline-color: var(--md-outlined-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-button-disabled-outline-opacity, .12);--_focus-label-text-color: var(--md-outlined-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-outlined-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-outlined-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-outlined-button-hover-state-layer-opacity, .08);--_label-text-color: var(--md-outlined-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-outlined-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-outlined-button-label-text-size, var(--md-sys-typescale-label-large-size, .875rem));--_label-text-weight: var(--md-outlined-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_outline-color: var(--md-outlined-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-button-outline-width, 1px);--_pressed-label-text-color: var(--md-outlined-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-outline-color: var(--md-outlined-button-pressed-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-color: var(--md-outlined-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-outlined-button-pressed-state-layer-opacity, .12);--_disabled-icon-color: var(--md-outlined-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-outlined-button-disabled-icon-opacity, .38);--_focus-icon-color: var(--md-outlined-button-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-icon-color: var(--md-outlined-button-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-color: var(--md-outlined-button-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-outlined-button-icon-size, 18px);--_pressed-icon-color: var(--md-outlined-button-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-outlined-button-container-shape-start-start, var(--md-outlined-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-outlined-button-container-shape-start-end, var(--md-outlined-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-outlined-button-container-shape-end-end, var(--md-outlined-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-outlined-button-container-shape-end-start, var(--md-outlined-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_leading-space: var(--md-outlined-button-leading-space, 24px);--_trailing-space: var(--md-outlined-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-outlined-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-outlined-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-outlined-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-outlined-button-with-trailing-icon-trailing-space, 16px);--_container-color: none;--_disabled-container-color: none;--_disabled-container-opacity: 0}._outlined_xni7h_6 ._outline_xni7h_6{inset:0;border-style:solid;position:absolute;box-sizing:border-box;border-color:var(--_outline-color);border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}._outlined_xni7h_6:active ._outline_xni7h_6{border-color:var(--_pressed-outline-color)}._outlined_xni7h_6[disabled] ._outline_xni7h_6{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}@media (forced-colors: active){._outlined_xni7h_6[disabled] ._background_xni7h_99{border-color:GrayText}._outlined_xni7h_6[disabled] ._outline_xni7h_6{opacity:1}}._outlined_xni7h_6 ._outline_xni7h_6,._outlined_xni7h_6 [data-component=ripple]{border-width:var(--_outline-width)}._outlined_xni7h_6 [data-component=ripple]{inline-size:calc(100% - 2 * var(--_outline-width));block-size:calc(100% - 2 * var(--_outline-width));border-style:solid;border-color:transparent}}@layer text{._text_xni7h_7{--_container-height: var(--md-text-button-container-height, 40px);--_disabled-label-text-color: var(--md-text-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-text-button-disabled-label-text-opacity, .38);--_focus-label-text-color: var(--md-text-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-text-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-text-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-text-button-hover-state-layer-opacity, .08);--_label-text-color: var(--md-text-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-text-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-text-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-text-button-label-text-size, var(--md-sys-typescale-label-large-size, .875rem));--_label-text-weight: var(--md-text-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-label-text-color: var(--md-text-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-text-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-text-button-pressed-state-layer-opacity, .12);--_disabled-icon-color: var(--md-text-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-text-button-disabled-icon-opacity, .38);--_focus-icon-color: var(--md-text-button-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-icon-color: var(--md-text-button-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-color: var(--md-text-button-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-text-button-icon-size, 18px);--_pressed-icon-color: var(--md-text-button-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-text-button-container-shape-start-start, var(--md-text-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-text-button-container-shape-start-end, var(--md-text-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-text-button-container-shape-end-end, var(--md-text-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-text-button-container-shape-end-start, var(--md-text-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_leading-space: var(--md-text-button-leading-space, 12px);--_trailing-space: var(--md-text-button-trailing-space, 12px);--_with-leading-icon-leading-space: var(--md-text-button-with-leading-icon-leading-space, 12px);--_with-leading-icon-trailing-space: var(--md-text-button-with-leading-icon-trailing-space, 16px);--_with-trailing-icon-leading-space: var(--md-text-button-with-trailing-icon-leading-space, 16px);--_with-trailing-icon-trailing-space: var(--md-text-button-with-trailing-icon-trailing-space, 12px);--_container-color: none;--_disabled-container-color: none;--_disabled-container-opacity: 0}}}}