/* Register layers in the correct order */
/* 
* Browsers define layer order based on when they encounter @layer declarations.
* This file should be imported by all component styles, and other CSS entry points,
* to ensure that layers are registered in the correct order.
*/
@layer base, tokens, utilities, components, overrides;
/* Add component styles to component layer while preserving Stencil Scoped CSS */
@layer components {
  :host button {
    border: none; /* reset browser default */
    border-radius: var(--semantic-border-radius-m);
    font-family: var(--semantic-font-family-utility);
    font-size: var(--semantic-font-size-utility-s);
    font-style: normal;
    font-weight: var(--semantic-font-weight-utility-attention);
    line-height: var(--semantic-line-height-utility-s);
    letter-spacing: var(--semantic-letter-spacing-utility-s);
    cursor: pointer;
    /* TYPES */
    /* FOCUS STATES */
    /* FULL-WIDTH */
    /* ICON AND INDICATOR VARIATIONS */
  }
  :host button[disabled] {
    cursor: not-allowed;
  }
  :host button.inverse {
    /*
      Overwrite existing and already assigned tokens with the inverted style tokens.
    */
    --semantic-color-action-surface-attention-resting: var(--semantic-color-action-surface-attention-inverse-resting);
    --semantic-color-action-surface-attention-hover: var(--semantic-color-action-surface-attention-inverse-hover);
    --semantic-color-action-surface-attention-active: var(--semantic-color-action-surface-attention-inverse-active);
    --semantic-color-action-surface-attention-disabled: var(
      --semantic-color-action-surface-attention-inverse-disabled
    );
    --semantic-color-on-action-primary-resting: var(--semantic-color-on-action-primary-inverse-resting);
    --semantic-color-on-action-primary-disabled: var(--semantic-color-on-action-primary-inverse-disabled);
    --semantic-color-action-primary-resting: var(--semantic-color-action-primary-inverse-resting);
    --semantic-color-action-primary-hover: var(--semantic-color-action-primary-inverse-hover);
    --semantic-color-action-primary-active: var(--semantic-color-action-primary-inverse-active);
    --semantic-color-action-primary-disabled: var(--semantic-color-action-primary-inverse-disabled);
    --semantic-color-action-secondary-resting: var(--semantic-color-action-secondary-inverse-resting);
    --semantic-color-action-secondary-hover: var(--semantic-color-action-secondary-inverse-hover);
    --semantic-color-action-secondary-active: var(--semantic-color-action-secondary-inverse-active);
    --semantic-color-action-secondary-disabled: var(--semantic-color-action-secondary-inverse-disabled);
    --semantic-color-border-primary-resting: var(--semantic-color-border-primary-inverse-resting);
    --semantic-color-border-primary-disabled: var(--semantic-color-border-primary-inverse-disabled);
    --semantic-color-on-signal-attention-resting: var(--semantic-color-on-signal-attention-inverse-resting);
    --semantic-color-on-signal-attention-disabled: var(--semantic-color-on-signal-attention-inverse-disabled);
  }
  :host button.contained {
    background: var(--semantic-color-action-surface-attention-resting);
    padding: var(--button-contained-m-inset-vertical) var(--button-contained-m-inset-horizontal);
    /* VARIATIONS */
  }
  :host button.contained.s {
    padding: var(--button-contained-s-inset-vertical) var(--button-contained-s-inset-horizontal);
  }
  :host button.contained.primary {
    color: var(--semantic-color-on-action-primary-resting);
    fill: var(--semantic-color-on-action-primary-resting);
    background: var(--semantic-color-action-surface-attention-resting);
  }
  :host button.contained.primary:hover {
    background: var(--semantic-color-action-surface-attention-hover);
  }
  :host button.contained.primary:active {
    background: var(--semantic-color-action-surface-attention-active);
  }
  :host button.contained.primary[disabled] {
    color: var(--semantic-color-on-action-primary-disabled);
    background: var(--semantic-color-action-surface-attention-disabled);
  }
  :host button.contained.secondary {
    color: var(--semantic-color-action-primary-resting);
    fill: var(--semantic-color-action-primary-resting);
    border: var(--semantic-border-width-action) solid var(--semantic-color-action-surface-attention-resting);
    background-color: var(--semantic-color-surface-none);
    padding: var(--button-contained-m-inset-vertical) var(--button-contained-m-inset-horizontal);
  }
  :host button.contained.secondary.s {
    padding: var(--button-contained-s-inset-vertical) var(--button-contained-s-inset-horizontal);
  }
  :host button.contained.secondary:hover {
    color: var(--semantic-color-on-action-primary-resting);
    fill: var(--semantic-color-on-action-primary-resting);
    background-color: var(--semantic-color-action-surface-attention-hover);
  }
  :host button.contained.secondary:active {
    color: var(--semantic-color-on-action-primary-resting);
    fill: var(--semantic-color-on-action-primary-resting);
    background-color: var(--semantic-color-action-surface-attention-active);
  }
  :host button.contained.secondary[disabled] {
    color: var(--semantic-color-on-action-primary-disabled);
    fill: var(--semantic-color-on-action-primary-disabled);
    background-color: var(--semantic-color-surface-none);
    border: var(--semantic-border-width-action) solid var(--semantic-color-action-surface-attention-disabled);
  }
  :host button.contained.tertiary {
    color: var(--semantic-color-action-primary-resting);
    fill: var(--semantic-color-action-primary-resting);
    background-color: var(--semantic-color-surface-none);
    text-decoration: underline;
  }
  :host button.contained.tertiary:hover {
    color: var(--semantic-color-on-action-primary-resting);
    fill: var(--semantic-color-on-action-primary-resting);
    background-color: var(--semantic-color-action-surface-attention-hover);
    text-decoration: none;
  }
  :host button.contained.tertiary:active {
    color: var(--semantic-color-on-action-primary-resting);
    fill: var(--semantic-color-on-action-primary-resting);
    background-color: var(--semantic-color-action-surface-attention-active);
    text-decoration: none;
  }
  :host button.contained.tertiary[disabled] {
    color: var(--semantic-color-action-primary-disabled);
    fill: var(--semantic-color-action-primary-disabled);
    background-color: var(--semantic-color-surface-none);
    text-decoration: underline;
  }
  :host button.contained.critical {
    color: var(--semantic-color-on-signal-attention-resting);
    background: var(--semantic-color-signal-attention-critical-resting);
  }
  :host button.contained.critical:hover {
    background: var(--semantic-color-signal-attention-critical-hover);
  }
  :host button.contained.critical:active {
    background: var(--semantic-color-signal-attention-critical-active);
  }
  :host button.contained.critical[disabled] {
    color: var(--semantic-color-on-signal-attention-disabled);
    background: var(--semantic-color-signal-attention-disabled);
  }
  :host button.plain {
    border-radius: var(--semantic-border-radius-s);
    font-size: var(--semantic-font-size-utility-m);
    line-height: var(--semantic-line-height-utility-m);
    letter-spacing: var(--semantic-letter-spacing-utility-m);
    text-decoration-line: underline;
    text-underline-position: from-font;
    background-color: var(--semantic-color-surface-none);
    /* VARIATIONS */
  }
  :host button.plain.s {
    font-size: var(--semantic-font-size-utility-s);
    line-height: var(--semantic-line-height-utility-s);
  }
  :host button.plain.primary {
    color: var(--semantic-color-action-primary-resting);
  }
  :host button.plain.primary:hover {
    color: var(--semantic-color-action-primary-hover);
  }
  :host button.plain.primary:active {
    color: var(--semantic-color-action-primary-active);
  }
  :host button.plain.primary[disabled] {
    color: var(--semantic-color-action-primary-disabled);
  }
  :host button.plain.secondary {
    color: var(--semantic-color-action-secondary-resting);
  }
  :host button.plain.secondary:hover {
    color: var(--semantic-color-action-secondary-hover);
  }
  :host button.plain.secondary:active {
    color: var(--semantic-color-action-secondary-active);
  }
  :host button.plain.secondary[disabled] {
    color: var(--semantic-color-action-secondary-disabled);
  }
  :host button.plain.critical {
    color: var(--semantic-color-signal-attention-critical-resting);
  }
  :host button.plain.critical:hover {
    color: var(--semantic-color-signal-attention-critical-hover);
  }
  :host button.plain.critical:active {
    color: var(--semantic-color-signal-attention-critical-active);
  }
  :host button.plain.critical[disabled] {
    color: var(--semantic-color-signal-attention-disabled);
  }
  :host button:focus {
    outline: var(--semantic-border-width-focus) solid var(--semantic-color-border-focus);
    outline-offset: var(--semantic-spacing-focus-offset);
  }
  :host button.full-width {
    width: -webkit-fill-available;
    width: -moz-available;
    width: fill-available;
    width: 100%;
  }
  :host button .btn-count-indicator {
    position: absolute;
    left: var(--button-contained-m-icon-indicator-count-offset-start);
    bottom: var(--button-contained-m-icon-indicator-count-offset-bottom);
  }
  :host button .btn-indicator {
    position: absolute;
    left: var(--button-contained-m-icon-indicator-countless-offset-start);
    bottom: var(--button-contained-m-icon-indicator-countless-offset-bottom);
  }
  :host button.icon-before .btn-icon {
    display: inline-block;
    position: relative;
    line-height: 0;
    margin-right: var(--semantic-spacing-content-s-gap-contained);
    vertical-align: middle;
  }
  :host button.icon-before .btn-icon svg {
    display: inline-block;
    margin: 0;
    width: var(--semantic-size-content-s);
    height: var(--semantic-size-content-s);
  }
  :host button.icon-after {
    display: flex;
  }
  :host button.icon-after .btn-icon {
    order: 1;
    position: relative;
    line-height: 0;
    margin-left: var(--semantic-spacing-content-s-gap-contained);
    vertical-align: middle;
  }
  :host button.icon-after .btn-icon svg {
    display: inline-block;
    margin: 0;
    width: var(--semantic-size-content-s);
    height: var(--semantic-size-content-s);
  }
  :host button.icon-only {
    position: relative;
    padding: var(--button-contained-m-icon-inset-all);
    line-height: 0;
    margin: 0;
  }
  :host button.icon-only .btn-icon {
    display: inline-block;
    position: relative;
  }
  :host button.icon-only .btn-icon svg {
    display: inline-block;
    margin: 0;
    width: var(--semantic-size-content-s);
    height: var(--semantic-size-content-s);
  }
}