@api-client/ui 0.2.10 → 0.2.11

package/build/src/md/icon-button/internals/IconButton.styles.js

@@ -1,614 +0,0 @@
-import { css } from 'lit';
-export default css `
-  :host {
-    display: inline-flex;
-    vertical-align: middle;
-    box-sizing: content-box;
-    writing-mode: horizontal-tb !important;
-    text-rendering: auto;
-    cursor: default;
-    user-select: none;
-    height: 48px;
-    width: 48px;
-    border-radius: var(--md-sys-shape-corner-extra-small);
-    align-items: center;
-    justify-content: center;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  }
-
-  .content ::slotted(*) {
-    width: 24px !important;
-    height: 24px !important;
-  }
-
-  .surface {
-    height: 40px;
-    width: 40px;
-    position: relative;
-    border-radius: var(--md-sys-shape-corner-full);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  .container,
-  .state {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: var(--md-sys-shape-corner-full);
-  }
-
-  .container {
-    z-index: 1;
-    transition: background-color 230ms cubic-bezier(0.4, 0, 0.2, 1);
-    pointer-events: none;
-  }
-
-  .state {
-    z-index: 2;
-    opacity: 0;
-    transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1);
-    pointer-events: none;
-  }
-
-  .content {
-    z-index: 3;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .ripple {
-    border-radius: inherit;
-    z-index: 3;
-  }
-
-  :host([disabled]) {
-    pointer-events: none;
-  }
-
-  /* General states */
-
-  :host .container {
-    background-color: var(--md-sys-color-primary);
-  }
-
-  :host([toggle]) .container {
-    background-color: var(--md-sys-color-surface-variant);
-  }
-
-  :host([toggle][aria-pressed='true']) .container,
-  :host([toggle][type='filled'][active]) .container {
-    background-color: var(--md-sys-color-primary);
-  }
-
-  :host .content ::slotted(*) {
-    color: var(--md-sys-color-on-primary);
-    fill: var(--md-sys-color-on-primary);
-  }
-
-  :host([toggle]) .content ::slotted(*) {
-    color: var(--md-sys-color-primary);
-    fill: var(--md-sys-color-primary);
-  }
-
-  :host([toggle][active]) .content ::slotted(*),
-  :host([toggle][type='filled'][active]) .content ::slotted(*) {
-    color: var(--md-sys-color-on-primary);
-    fill: var(--md-sys-color-on-primary);
-  }
-
-  /* Filled states */
-
-  :host([type='filled']) {
-    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-primary);
-    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-primary);
-    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-primary);
-  }
-
-  :host([type='filled'][disabled]) .container {
-    background-color: var(--md-sys-color-on-surface) !important;
-    opacity: 0.12;
-  }
-
-  :host([type='filled'][disabled]) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface) !important;
-    color: var(--md-sys-color-on-surface) !important;
-    opacity: 0.38;
-  }
-
-  :host([type='filled']:hover) .state {
-    background-color: var(--md-sys-color-on-primary);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([type='filled']:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-primary);
-    color: var(--md-sys-color-on-primary);
-  }
-
-  :host([toggle][type='filled']:hover) .state {
-    background-color: var(--md-sys-color-primary);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([toggle][type='filled']:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-primary);
-    color: var(--md-sys-color-primary);
-  }
-
-  :host([toggle][type='filled'][active]:hover) .state {
-    background-color: var(--md-sys-color-on-primary);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([toggle][type='filled'][active]:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-primary);
-    color: var(--md-sys-color-on-primary);
-  }
-
-  :host([type='filled']:focus) .state {
-    background-color: var(--md-sys-color-on-primary);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([type='filled']:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-primary);
-    color: var(--md-sys-color-on-primary);
-  }
-
-  :host([toggle][type='filled']:focus) .state {
-    background-color: var(--md-sys-color-primary);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([toggle][type='filled']:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-primary);
-    color: var(--md-sys-color-primary);
-  }
-
-  :host([toggle][type='filled'][active]:focus) .state {
-    background-color: var(--md-sys-color-on-primary);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([toggle][type='filled'][active]:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-primary);
-    color: var(--md-sys-color-on-primary);
-  }
-
-  :host([type='filled']:active) .state,
-  :host([type='filled']) .pressed .state {
-    background-color: var(--md-sys-color-on-primary);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([type='filled']:active) .content ::slotted(*),
-  :host([type='filled']) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-on-primary);
-    color: var(--md-sys-color-on-primary);
-  }
-
-  :host([toggle][type='filled']:active) .state,
-  :host([toggle][type='filled']) .pressed .state {
-    background-color: var(--md-sys-color-primary);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([toggle][type='filled']:active) .content ::slotted(*),
-  :host([toggle][type='filled']:active) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-primary);
-    color: var(--md-sys-color-primary);
-  }
-
-  :host([toggle][type='filled'][active]:active) .state,
-  :host([toggle][type='filled'][active]) .pressed .state {
-    background-color: var(--md-sys-color-on-primary);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([toggle][type='filled'][active]:active) .content ::slotted(*),
-  :host([toggle][type='filled'][active]:active) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-on-primary);
-    color: var(--md-sys-color-on-primary);
-  }
-
-  /* Tonal states */
-
-  :host([type='tonal']) {
-    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-secondary-container);
-    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-secondary-container);
-    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-secondary-container);
-  }
-
-  :host([type='tonal']) .container {
-    background-color: var(--md-sys-color-secondary-container);
-  }
-
-  :host([type='tonal'][toggle]) .container {
-    background-color: var(--md-sys-color-surface-variant);
-  }
-
-  :host([type='tonal'][toggle]) .content ::slotted(*) {
-    color: var(--md-sys-color-on-surface-variant);
-    fill: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='tonal'][active]) .container {
-    background-color: var(--md-sys-color-secondary-container);
-  }
-
-  :host([toggle][type='tonal'][active]) .content ::slotted(*) {
-    color: var(--md-sys-color-on-secondary-container);
-    fill: var(--md-sys-color-on-secondary-container);
-  }
-
-  :host([type='tonal']) .content ::slotted(*) {
-    color: var(--md-sys-color-on-secondary-container);
-    fill: var(--md-sys-color-on-secondary-container);
-  }
-
-  :host([type='tonal'][toggle]) .content ::slotted(*) {
-    color: var(--md-sys-color-on-surface-variant);
-    fill: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([type='tonal'][disabled]) .container {
-    background-color: var(--md-sys-color-on-surface);
-    opacity: 0.12;
-  }
-
-  :host([type='tonal'][disabled]) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface);
-    color: var(--md-sys-color-on-surface);
-    opacity: 0.38;
-  }
-
-  :host([type='tonal']:hover) .state {
-    background-color: var(--md-sys-color-on-secondary-container);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([type='tonal']:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-  }
-
-  :host([toggle][type='tonal']:hover) .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([toggle][type='tonal']:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='tonal'][active]:hover) .state {
-    background-color: var(--md-sys-color-on-secondary-container);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([toggle][type='tonal'][active]:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-  }
-
-  :host([type='tonal']:focus) .state {
-    background-color: var(--md-sys-color-on-secondary-container);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([type='tonal']:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-  }
-
-  :host([toggle][type='tonal']:focus) .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([toggle][type='tonal']:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='tonal'][active]:focus) .state {
-    background-color: var(--md-sys-color-on-secondary-container);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([toggle][type='tonal'][active]:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-  }
-
-  :host([type='tonal']:active) .state,
-  :host([type='tonal']) .pressed .state {
-    background-color: var(--md-sys-color-on-secondary-container);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([type='tonal']:active) .content ::slotted(*),
-  :host([type='tonal']) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-on-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-  }
-
-  :host([toggle][type='tonal']:active) .state,
-  :host([toggle][type='tonal']) .pressed .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([toggle][type='tonal']:active) .content ::slotted(*),
-  :host([toggle][type='tonal']) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  /* Outlined states */
-
-  :host([type='outlined']) {
-    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);
-    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);
-    --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
-  }
-
-  :host([type='outlined']) .container {
-    border: 1px var(--md-sys-color-outline) solid;
-    background-color: transparent;
-  }
-
-  :host([toggle][type='outlined'][active]) .container {
-    background-color: var(--md-sys-color-inverse-surface);
-  }
-
-  :host([type='outlined']) .content ::slotted(*) {
-    color: var(--md-sys-color-on-surface-variant);
-    fill: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='outlined'][active]) .content ::slotted(*) {
-    color: var(--md-sys-color-inverse-on-surface);
-    fill: var(--md-sys-color-inverse-on-surface);
-  }
-
-  :host([type='outlined'][disabled]) .container {
-    background-color: var(--md-sys-color-on-surface);
-    opacity: 0.12;
-  }
-
-  :host([type='outlined'][disabled]) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface);
-    color: var(--md-sys-color-on-surface);
-    opacity: 0.38;
-  }
-
-  :host([type='outlined']:hover) .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([type='outlined']:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='outlined']:hover) .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([toggle][type='outlined']:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='outlined'][active]:hover) .state {
-    background-color: var(--md-sys-color-inverse-on-surface);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([toggle][type='outlined'][active]:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-inverse-on-surface);
-    color: var(--md-sys-color-inverse-on-surface);
-  }
-
-  :host([type='outlined']:focus) .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([type='outlined']:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='outlined']:focus) .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([toggle][type='outlined']:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='outlined'][active]:focus) .state {
-    background-color: var(--md-sys-color-inverse-on-surface);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([toggle][type='outlined'][active]:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-inverse-on-surface);
-    color: var(--md-sys-color-inverse-on-surface);
-  }
-
-  :host([type='outlined']:active) .state,
-  :host([type='outlined']) .pressed .state {
-    background-color: var(--md-sys-color-on-surface);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([type='outlined']:active) .content ::slotted(*),
-  :host([type='outlined']) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface);
-    color: var(--md-sys-color-on-surface);
-  }
-
-  :host([toggle][type='outlined']:active) .state,
-  :host([toggle][type='outlined']) .pressed .state {
-    background-color: var(--md-sys-color-on-surface);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([toggle][type='outlined']:active) .content ::slotted(*),
-  :host([toggle][type='outlined']) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface);
-    color: var(--md-sys-color-on-surface);
-  }
-
-  :host([toggle][type='outlined'][active]:active) .state,
-  :host([toggle][type='outlined'][active]) .pressed .state {
-    background-color: var(--md-sys-color-inverse-on-surface);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([toggle][type='outlined'][active]:active) .content ::slotted(*),
-  :host([toggle][type='outlined'][active]) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-inverse-on-surface);
-    color: var(--md-sys-color-inverse-on-surface);
-  }
-
-  /* Standard states */
-
-  :host([type='text']) {
-    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);
-    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);
-    --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
-  }
-
-  :host([type='standard']) .container,
-  :host([type='standard'][toggle]) .container {
-    background-color: transparent;
-  }
-
-  :host([type='standard']) .content ::slotted(*) {
-    color: var(--md-sys-color-on-surface-variant);
-    fill: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='standard'][active]) .content ::slotted(*) {
-    color: var(--md-sys-color-primary);
-    fill: var(--md-sys-color-primary);
-  }
-
-  :host([type='standard'][disabled]) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface);
-    color: var(--md-sys-color-on-surface);
-    opacity: 0.38;
-  }
-
-  :host([type='standard']:hover) .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([type='standard']:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='standard']:hover) .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([toggle][type='standard']:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='standard'][active]:hover) .state {
-    background-color: var(--md-sys-color-primary);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([toggle][type='standard'][active]:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-primary);
-    color: var(--md-sys-color-primary);
-  }
-
-  :host([type='standard']:focus) .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([type='standard']:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='standard']:focus) .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([toggle][type='standard']:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='standard'][active]:focus) .state {
-    background-color: var(--md-sys-color-primary);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([toggle][type='standard'][active]:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-primary);
-    color: var(--md-sys-color-primary);
-  }
-
-  :host([type='standard']:active) .state,
-  :host([type='standard']) .pressed .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([type='standard']:active) .content ::slotted(*),
-  :host([type='standard']) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='standard']:active) .state,
-  :host([toggle][type='standard']) .pressed .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([toggle][type='standard']:active) .content ::slotted(*),
-  :host([toggle][type='standard']) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='standard'][active]:active) .state,
-  :host([toggle][type='standard'][active]) .pressed .state {
-    background-color: var(--md-sys-color-primary);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([toggle][type='standard'][active]:active) .content ::slotted(*),
-  :host([toggle][type='standard'][active]) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-primary);
-    color: var(--md-sys-color-primary);
-  }
-`;
-//# sourceMappingURL=IconButton.styles.js.map

package/build/src/md/icon-button/internals/IconButton.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton.styles.js","sourceRoot":"","sources":["../../../../../src/md/icon-button/internals/IconButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmmBjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: inline-flex;\n    vertical-align: middle;\n    box-sizing: content-box;\n    writing-mode: horizontal-tb !important;\n    text-rendering: auto;\n    cursor: default;\n    user-select: none;\n    height: 48px;\n    width: 48px;\n    border-radius: var(--md-sys-shape-corner-extra-small);\n    align-items: center;\n    justify-content: center;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  }\n\n  .content ::slotted(*) {\n    width: 24px !important;\n    height: 24px !important;\n  }\n\n  .surface {\n    height: 40px;\n    width: 40px;\n    position: relative;\n    border-radius: var(--md-sys-shape-corner-full);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .container,\n  .state {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border-radius: var(--md-sys-shape-corner-full);\n  }\n\n  .container {\n    z-index: 1;\n    transition: background-color 230ms cubic-bezier(0.4, 0, 0.2, 1);\n    pointer-events: none;\n  }\n\n  .state {\n    z-index: 2;\n    opacity: 0;\n    transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1);\n    pointer-events: none;\n  }\n\n  .content {\n    z-index: 3;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .ripple {\n    border-radius: inherit;\n    z-index: 3;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  /* General states */\n\n  :host .container {\n    background-color: var(--md-sys-color-primary);\n  }\n\n  :host([toggle]) .container {\n    background-color: var(--md-sys-color-surface-variant);\n  }\n\n  :host([toggle][aria-pressed='true']) .container,\n  :host([toggle][type='filled'][active]) .container {\n    background-color: var(--md-sys-color-primary);\n  }\n\n  :host .content ::slotted(*) {\n    color: var(--md-sys-color-on-primary);\n    fill: var(--md-sys-color-on-primary);\n  }\n\n  :host([toggle]) .content ::slotted(*) {\n    color: var(--md-sys-color-primary);\n    fill: var(--md-sys-color-primary);\n  }\n\n  :host([toggle][active]) .content ::slotted(*),\n  :host([toggle][type='filled'][active]) .content ::slotted(*) {\n    color: var(--md-sys-color-on-primary);\n    fill: var(--md-sys-color-on-primary);\n  }\n\n  /* Filled states */\n\n  :host([type='filled']) {\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-primary);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-primary);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-primary);\n  }\n\n  :host([type='filled'][disabled]) .container {\n    background-color: var(--md-sys-color-on-surface) !important;\n    opacity: 0.12;\n  }\n\n  :host([type='filled'][disabled]) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-surface) !important;\n    color: var(--md-sys-color-on-surface) !important;\n    opacity: 0.38;\n  }\n\n  :host([type='filled']:hover) .state {\n    background-color: var(--md-sys-color-on-primary);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n  }\n\n  :host([type='filled']:hover) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-primary);\n    color: var(--md-sys-color-on-primary);\n  }\n\n  :host([toggle][type='filled']:hover) .state {\n    background-color: var(--md-sys-color-primary);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n  }\n\n  :host([toggle][type='filled']:hover) .content ::slotted(*) {\n    fill: var(--md-sys-color-primary);\n    color: var(--md-sys-color-primary);\n  }\n\n  :host([toggle][type='filled'][active]:hover) .state {\n    background-color: var(--md-sys-color-on-primary);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n  }\n\n  :host([toggle][type='filled'][active]:hover) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-primary);\n    color: var(--md-sys-color-on-primary);\n  }\n\n  :host([type='filled']:focus) .state {\n    background-color: var(--md-sys-color-on-primary);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n  }\n\n  :host([type='filled']:focus) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-primary);\n    color: var(--md-sys-color-on-primary);\n  }\n\n  :host([toggle][type='filled']:focus) .state {\n    background-color: var(--md-sys-color-primary);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n  }\n\n  :host([toggle][type='filled']:focus) .content ::slotted(*) {\n    fill: var(--md-sys-color-primary);\n    color: var(--md-sys-color-primary);\n  }\n\n  :host([toggle][type='filled'][active]:focus) .state {\n    background-color: var(--md-sys-color-on-primary);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n  }\n\n  :host([toggle][type='filled'][active]:focus) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-primary);\n    color: var(--md-sys-color-on-primary);\n  }\n\n  :host([type='filled']:active) .state,\n  :host([type='filled']) .pressed .state {\n    background-color: var(--md-sys-color-on-primary);\n    opacity: var(--md-sys-state-pressed-state-layer-opacity);\n  }\n\n  :host([type='filled']:active) .content ::slotted(*),\n  :host([type='filled']) .pressed .content ::slotted(*) {\n    fill: var(--md-sys-color-on-primary);\n    color: var(--md-sys-color-on-primary);\n  }\n\n  :host([toggle][type='filled']:active) .state,\n  :host([toggle][type='filled']) .pressed .state {\n    background-color: var(--md-sys-color-primary);\n    opacity: var(--md-sys-state-pressed-state-layer-opacity);\n  }\n\n  :host([toggle][type='filled']:active) .content ::slotted(*),\n  :host([toggle][type='filled']:active) .pressed .content ::slotted(*) {\n    fill: var(--md-sys-color-primary);\n    color: var(--md-sys-color-primary);\n  }\n\n  :host([toggle][type='filled'][active]:active) .state,\n  :host([toggle][type='filled'][active]) .pressed .state {\n    background-color: var(--md-sys-color-on-primary);\n    opacity: var(--md-sys-state-pressed-state-layer-opacity);\n  }\n\n  :host([toggle][type='filled'][active]:active) .content ::slotted(*),\n  :host([toggle][type='filled'][active]:active) .pressed .content ::slotted(*) {\n    fill: var(--md-sys-color-on-primary);\n    color: var(--md-sys-color-on-primary);\n  }\n\n  /* Tonal states */\n\n  :host([type='tonal']) {\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-secondary-container);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-secondary-container);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-secondary-container);\n  }\n\n  :host([type='tonal']) .container {\n    background-color: var(--md-sys-color-secondary-container);\n  }\n\n  :host([type='tonal'][toggle]) .container {\n    background-color: var(--md-sys-color-surface-variant);\n  }\n\n  :host([type='tonal'][toggle]) .content ::slotted(*) {\n    color: var(--md-sys-color-on-surface-variant);\n    fill: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([toggle][type='tonal'][active]) .container {\n    background-color: var(--md-sys-color-secondary-container);\n  }\n\n  :host([toggle][type='tonal'][active]) .content ::slotted(*) {\n    color: var(--md-sys-color-on-secondary-container);\n    fill: var(--md-sys-color-on-secondary-container);\n  }\n\n  :host([type='tonal']) .content ::slotted(*) {\n    color: var(--md-sys-color-on-secondary-container);\n    fill: var(--md-sys-color-on-secondary-container);\n  }\n\n  :host([type='tonal'][toggle]) .content ::slotted(*) {\n    color: var(--md-sys-color-on-surface-variant);\n    fill: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([type='tonal'][disabled]) .container {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: 0.12;\n  }\n\n  :host([type='tonal'][disabled]) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-surface);\n    color: var(--md-sys-color-on-surface);\n    opacity: 0.38;\n  }\n\n  :host([type='tonal']:hover) .state {\n    background-color: var(--md-sys-color-on-secondary-container);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n  }\n\n  :host([type='tonal']:hover) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n  }\n\n  :host([toggle][type='tonal']:hover) .state {\n    background-color: var(--md-sys-color-on-surface-variant);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n  }\n\n  :host([toggle][type='tonal']:hover) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-surface-variant);\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([toggle][type='tonal'][active]:hover) .state {\n    background-color: var(--md-sys-color-on-secondary-container);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n  }\n\n  :host([toggle][type='tonal'][active]:hover) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n  }\n\n  :host([type='tonal']:focus) .state {\n    background-color: var(--md-sys-color-on-secondary-container);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n  }\n\n  :host([type='tonal']:focus) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n  }\n\n  :host([toggle][type='tonal']:focus) .state {\n    background-color: var(--md-sys-color-on-surface-variant);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n  }\n\n  :host([toggle][type='tonal']:focus) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-surface-variant);\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([toggle][type='tonal'][active]:focus) .state {\n    background-color: var(--md-sys-color-on-secondary-container);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n  }\n\n  :host([toggle][type='tonal'][active]:focus) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n  }\n\n  :host([type='tonal']:active) .state,\n  :host([type='tonal']) .pressed .state {\n    background-color: var(--md-sys-color-on-secondary-container);\n    opacity: var(--md-sys-state-pressed-state-layer-opacity);\n  }\n\n  :host([type='tonal']:active) .content ::slotted(*),\n  :host([type='tonal']) .pressed .content ::slotted(*) {\n    fill: var(--md-sys-color-on-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n  }\n\n  :host([toggle][type='tonal']:active) .state,\n  :host([toggle][type='tonal']) .pressed .state {\n    background-color: var(--md-sys-color-on-surface-variant);\n    opacity: var(--md-sys-state-pressed-state-layer-opacity);\n  }\n\n  :host([toggle][type='tonal']:active) .content ::slotted(*),\n  :host([toggle][type='tonal']) .pressed .content ::slotted(*) {\n    fill: var(--md-sys-color-on-surface-variant);\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  /* Outlined states */\n\n  :host([type='outlined']) {\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);\n  }\n\n  :host([type='outlined']) .container {\n    border: 1px var(--md-sys-color-outline) solid;\n    background-color: transparent;\n  }\n\n  :host([toggle][type='outlined'][active]) .container {\n    background-color: var(--md-sys-color-inverse-surface);\n  }\n\n  :host([type='outlined']) .content ::slotted(*) {\n    color: var(--md-sys-color-on-surface-variant);\n    fill: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([toggle][type='outlined'][active]) .content ::slotted(*) {\n    color: var(--md-sys-color-inverse-on-surface);\n    fill: var(--md-sys-color-inverse-on-surface);\n  }\n\n  :host([type='outlined'][disabled]) .container {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: 0.12;\n  }\n\n  :host([type='outlined'][disabled]) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-surface);\n    color: var(--md-sys-color-on-surface);\n    opacity: 0.38;\n  }\n\n  :host([type='outlined']:hover) .state {\n    background-color: var(--md-sys-color-on-surface-variant);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n  }\n\n  :host([type='outlined']:hover) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-surface-variant);\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([toggle][type='outlined']:hover) .state {\n    background-color: var(--md-sys-color-on-surface-variant);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n  }\n\n  :host([toggle][type='outlined']:hover) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-surface-variant);\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([toggle][type='outlined'][active]:hover) .state {\n    background-color: var(--md-sys-color-inverse-on-surface);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n  }\n\n  :host([toggle][type='outlined'][active]:hover) .content ::slotted(*) {\n    fill: var(--md-sys-color-inverse-on-surface);\n    color: var(--md-sys-color-inverse-on-surface);\n  }\n\n  :host([type='outlined']:focus) .state {\n    background-color: var(--md-sys-color-on-surface-variant);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n  }\n\n  :host([type='outlined']:focus) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-surface-variant);\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([toggle][type='outlined']:focus) .state {\n    background-color: var(--md-sys-color-on-surface-variant);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n  }\n\n  :host([toggle][type='outlined']:focus) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-surface-variant);\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([toggle][type='outlined'][active]:focus) .state {\n    background-color: var(--md-sys-color-inverse-on-surface);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n  }\n\n  :host([toggle][type='outlined'][active]:focus) .content ::slotted(*) {\n    fill: var(--md-sys-color-inverse-on-surface);\n    color: var(--md-sys-color-inverse-on-surface);\n  }\n\n  :host([type='outlined']:active) .state,\n  :host([type='outlined']) .pressed .state {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: var(--md-sys-state-pressed-state-layer-opacity);\n  }\n\n  :host([type='outlined']:active) .content ::slotted(*),\n  :host([type='outlined']) .pressed .content ::slotted(*) {\n    fill: var(--md-sys-color-on-surface);\n    color: var(--md-sys-color-on-surface);\n  }\n\n  :host([toggle][type='outlined']:active) .state,\n  :host([toggle][type='outlined']) .pressed .state {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: var(--md-sys-state-pressed-state-layer-opacity);\n  }\n\n  :host([toggle][type='outlined']:active) .content ::slotted(*),\n  :host([toggle][type='outlined']) .pressed .content ::slotted(*) {\n    fill: var(--md-sys-color-on-surface);\n    color: var(--md-sys-color-on-surface);\n  }\n\n  :host([toggle][type='outlined'][active]:active) .state,\n  :host([toggle][type='outlined'][active]) .pressed .state {\n    background-color: var(--md-sys-color-inverse-on-surface);\n    opacity: var(--md-sys-state-pressed-state-layer-opacity);\n  }\n\n  :host([toggle][type='outlined'][active]:active) .content ::slotted(*),\n  :host([toggle][type='outlined'][active]) .pressed .content ::slotted(*) {\n    fill: var(--md-sys-color-inverse-on-surface);\n    color: var(--md-sys-color-inverse-on-surface);\n  }\n\n  /* Standard states */\n\n  :host([type='text']) {\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);\n  }\n\n  :host([type='standard']) .container,\n  :host([type='standard'][toggle]) .container {\n    background-color: transparent;\n  }\n\n  :host([type='standard']) .content ::slotted(*) {\n    color: var(--md-sys-color-on-surface-variant);\n    fill: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([toggle][type='standard'][active]) .content ::slotted(*) {\n    color: var(--md-sys-color-primary);\n    fill: var(--md-sys-color-primary);\n  }\n\n  :host([type='standard'][disabled]) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-surface);\n    color: var(--md-sys-color-on-surface);\n    opacity: 0.38;\n  }\n\n  :host([type='standard']:hover) .state {\n    background-color: var(--md-sys-color-on-surface-variant);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n  }\n\n  :host([type='standard']:hover) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-surface-variant);\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([toggle][type='standard']:hover) .state {\n    background-color: var(--md-sys-color-on-surface-variant);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n  }\n\n  :host([toggle][type='standard']:hover) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-surface-variant);\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([toggle][type='standard'][active]:hover) .state {\n    background-color: var(--md-sys-color-primary);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n  }\n\n  :host([toggle][type='standard'][active]:hover) .content ::slotted(*) {\n    fill: var(--md-sys-color-primary);\n    color: var(--md-sys-color-primary);\n  }\n\n  :host([type='standard']:focus) .state {\n    background-color: var(--md-sys-color-on-surface-variant);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n  }\n\n  :host([type='standard']:focus) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-surface-variant);\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([toggle][type='standard']:focus) .state {\n    background-color: var(--md-sys-color-on-surface-variant);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n  }\n\n  :host([toggle][type='standard']:focus) .content ::slotted(*) {\n    fill: var(--md-sys-color-on-surface-variant);\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([toggle][type='standard'][active]:focus) .state {\n    background-color: var(--md-sys-color-primary);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n  }\n\n  :host([toggle][type='standard'][active]:focus) .content ::slotted(*) {\n    fill: var(--md-sys-color-primary);\n    color: var(--md-sys-color-primary);\n  }\n\n  :host([type='standard']:active) .state,\n  :host([type='standard']) .pressed .state {\n    background-color: var(--md-sys-color-on-surface-variant);\n    opacity: var(--md-sys-state-pressed-state-layer-opacity);\n  }\n\n  :host([type='standard']:active) .content ::slotted(*),\n  :host([type='standard']) .pressed .content ::slotted(*) {\n    fill: var(--md-sys-color-on-surface-variant);\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([toggle][type='standard']:active) .state,\n  :host([toggle][type='standard']) .pressed .state {\n    background-color: var(--md-sys-color-on-surface-variant);\n    opacity: var(--md-sys-state-pressed-state-layer-opacity);\n  }\n\n  :host([toggle][type='standard']:active) .content ::slotted(*),\n  :host([toggle][type='standard']) .pressed .content ::slotted(*) {\n    fill: var(--md-sys-color-on-surface-variant);\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([toggle][type='standard'][active]:active) .state,\n  :host([toggle][type='standard'][active]) .pressed .state {\n    background-color: var(--md-sys-color-primary);\n    opacity: var(--md-sys-state-pressed-state-layer-opacity);\n  }\n\n  :host([toggle][type='standard'][active]:active) .content ::slotted(*),\n  :host([toggle][type='standard'][active]) .pressed .content ::slotted(*) {\n    fill: var(--md-sys-color-primary);\n    color: var(--md-sys-color-primary);\n  }\n`\n"]}