:host {
  display: inline-block;
  max-width: 100%;
  flex-shrink: 0;
}

  :host * {
    box-sizing: border-box;
  }

.button {
  display: inline-flex;
  width: 100%;
  padding: var(--s-space-8) var(--s-space-16);
  justify-content: center;
  align-items: center;
  border: none;
  border-top-left-radius: var(--swirl-button-border-top-left-radius);
  border-top-right-radius: var(--swirl-button-border-top-right-radius);
  border-bottom-right-radius: var(--swirl-button-border-bottom-right-radius);
  border-bottom-left-radius: var(--swirl-button-border-bottom-left-radius);
  color: var(--s-text-subdued);
  background-color: var(--swirl-ghost-button-background-default);
  font: inherit;
  font-weight: var(--s-font-weight-medium);
  line-height: var(--s-line-height-lg);
  text-decoration: none;
  cursor: pointer;
  gap: var(--s-space-8);
  transition: box-shadow 0.3s;
}

.button:hover {
    background-color: var(--swirl-ghost-button-background-hovered);

    --swirl-tag-background-default: var(--s-state-pressed);
  }

.button:active {
    background-color: var(--swirl-ghost-button-background-pressed);
  }

.button--elevated {
    box-shadow: var(--s-shadow-level-2);
  }

.button:disabled,
  .button.button--disabled {
    color: var(--s-text-disabled);
    cursor: default;
  }

.button:disabled:where(:not(.button--variant-ghost)), .button.button--disabled:where(:not(.button--variant-ghost)) {
      background-color: var(--swirl-ghost-button-background-disabled);
    }

.button:disabled .button__icon, .button.button--disabled .button__icon {
      color: var(--s-icon-disabled);
    }

.button:focus-visible {
    outline-color: var(--s-focus-default);
    outline-offset: var(--s-space-2);
  }

@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {

.button {
    padding: var(--s-space-8) var(--s-space-12);
    font-size: var(--s-font-size-sm);
    line-height: var(--s-line-height-sm);
    gap: var(--s-space-4)
}
  }

.button--text-align-start {
  justify-content: flex-start;
}

.button--text-align-center {
  justify-content: center;
}

.button--text-align-end {
  justify-content: flex-end;
}

.button--variant-ghost.button--intent-strong:where(:not(:disabled):not(.button--disabled)) {
    color: var(--s-text-default);
  }

.button--variant-ghost.button--intent-strong:where(:not(:disabled):not(.button--disabled)) .button__icon {
      color: var(--s-icon-strong);
    }

.button--variant-ghost.button--intent-primary:where(:not(:disabled):not(.button--disabled)) {
    color: var(--s-text-highlight);
  }

.button--variant-ghost.button--intent-primary:where(:not(:disabled):not(.button--disabled)) .button__icon {
      color: var(--s-icon-highlight);
    }

.button--variant-ghost.button--intent-critical:where(:not(:disabled):not(.button--disabled)) {
    color: var(--s-text-critical);
  }

.button--variant-ghost.button--intent-critical:where(:not(:disabled):not(.button--disabled)) .button__icon {
      color: var(--s-icon-critical);
    }

.button--variant-ghost.button--pressed {
    color: var(--s-text-highlight);
  }

.button--variant-ghost.button--pressed .button__icon {
      color: var(--s-icon-highlight);
    }

.button--variant-ghost.button--size-l {
    padding: var(--s-space-12) var(--s-space-20);
  }

.button--variant-ghost.button--size-l.button--icon-only {
      padding: var(--s-space-12);
    }

.button--variant-flat {
  color: var(--s-text-default);
  background-color: var(--swirl-flat-button-background-default);
  --swirl-tag-background-default: var(--s-state-pressed);
}

.button--variant-flat:hover {
    background-color: var(--swirl-flat-button-background-hovered);
  }

.button--variant-flat:active {
    background-color: var(--swirl-flat-button-background-pressed);
  }

.button--variant-flat:disabled,
  .button--variant-flat.button--disabled {
    background-color: var(--swirl-flat-button-background-disabled);
  }

.button--variant-flat.button--intent-primary:where(:not(:disabled):not(.button--disabled)) {
    color: var(--s-text-on-action-primary);
    background-color: var(--s-action-primary-default);
  }

.button--variant-flat.button--intent-primary:where(:not(:disabled):not(.button--disabled)):hover {
      background-color: var(--s-action-primary-hovered);
    }

.button--variant-flat.button--intent-primary:where(:not(:disabled):not(.button--disabled)):active {
      background-color: var(--s-action-primary-pressed);
    }

.button--variant-flat.button--intent-primary:where(:not(:disabled):not(.button--disabled)) .button__icon {
      color: var(--s-icon-on-action-primary);
    }

.button--variant-flat.button--intent-critical:where(:not(:disabled):not(.button--disabled)) {
    color: var(--s-text-on-status);
    background-color: var(--s-action-critical-default);
  }

.button--variant-flat.button--intent-critical:where(:not(:disabled):not(.button--disabled)):hover {
      background-color: var(--s-action-critical-hovered);
    }

.button--variant-flat.button--intent-critical:where(:not(:disabled):not(.button--disabled)):active {
      background-color: var(--s-action-critical-pressed);
    }

.button--variant-flat.button--intent-critical:where(:not(:disabled):not(.button--disabled)) .button__icon {
      color: var(--s-icon-on-status);
    }

.button--variant-flat .button__icon {
    color: var(--s-icon-strong);
  }

.button--variant-flat.button--size-l {
    padding: var(--s-space-12) var(--s-space-20);
  }

.button--variant-flat.button--size-l.button--icon-only {
      padding: var(--s-space-12);
    }

.button--variant-outline {
  color: var(--s-text-default);
  outline: var(--s-border-width-default) solid var(--s-border-strong);
  outline-offset: calc(var(--s-border-width-default) * -1);
}

.button--variant-outline:disabled,
  .button--variant-outline.button--disabled {
    outline-color: var(--s-border-default);
  }

.button--variant-outline.button--intent-critical:where(:not(:disabled):not(.button--disabled)) {
    color: var(--s-text-critical);
    outline-color: var(--s-border-critical);
  }

.button--variant-outline.button--intent-critical:where(:not(:disabled):not(.button--disabled)) .button__icon {
      color: var(--s-icon-critical);
    }

.button--variant-outline.button--intent-primary:where(:not(:disabled):not(.button--disabled)),
  .button--variant-outline.button--pressed {
    color: var(--s-text-highlight);
    outline-color: var(--s-border-highlight);
  }

.button--variant-outline.button--intent-primary:where(:not(:disabled):not(.button--disabled)) .button__icon, .button--variant-outline.button--pressed .button__icon {
      color: var(--s-icon-highlight);
    }

.button--variant-outline.button--size-l {
    padding: var(--s-space-12) var(--s-space-20);
  }

.button--variant-outline.button--size-l.button--icon-only {
      padding: var(--s-space-12);
    }

.button--variant-outline .button__icon {
    color: var(--s-icon-strong);
  }

.button--variant-plain {
  padding: 0;
  border-radius: 0;
  color: var(--swirl-plain-button-text-color-default);
  background-color: transparent;
}

.button--variant-plain:hover:where(:not(:disabled):not(.button--disabled)) {
    color: var(--swirl-plain-button-text-color-hovered);
    background-color: transparent;
    text-decoration: underline;
    text-underline-offset: var(--s-space-4);
  }

.button--variant-plain:hover:where(:not(:disabled):not(.button--disabled)) .button__icon {
      color: var(--swirl-plain-button-text-color-hovered);
    }

.button--variant-plain:active:where(:not(:disabled):not(.button--disabled)) {
    color: var(--swirl-plain-button-text-color-pressed);
    background-color: transparent;
  }

.button--variant-plain:active:where(:not(:disabled):not(.button--disabled)) .button__icon {
      color: var(--swirl-plain-button-text-color-pressed);
    }

.button--variant-plain:disabled,
  .button--variant-plain.button--disabled {
    color: var(--swirl-plain-button-text-color-disabled);
    background-color: transparent;
  }

.button--variant-plain:disabled .button__icon, .button--variant-plain.button--disabled .button__icon {
      color: var(--swirl-plain-button-text-color-disabled);
    }

.button--variant-plain.button--icon-only {
    padding: 0;
  }

.button--variant-plain.button--intent-strong:where(:not(:disabled):not(.button--disabled)) {
    color: var(--s-text-default);
  }

.button--variant-plain.button--intent-strong:where(:not(:disabled):not(.button--disabled)) .button__icon {
      color: var(--s-icon-strong);
    }

.button--variant-plain.button--intent-primary {
    color: var(--s-interactive-primary-default);
  }

.button--variant-plain.button--intent-primary:hover:where(:not(:disabled):not(.button--disabled)) {
      color: var(--s-interactive-primary-hovered);
    }

.button--variant-plain.button--intent-primary:hover:where(:not(:disabled):not(.button--disabled)) .button__icon {
        color: var(--s-interactive-primary-hovered);
      }

.button--variant-plain.button--intent-primary:active:where(:not(:disabled):not(.button--disabled)) {
      color: var(--s-interactive-primary-pressed);
    }

.button--variant-plain.button--intent-primary:active:where(:not(:disabled):not(.button--disabled)) .button__icon {
        color: var(--s-interactive-primary-pressed);
      }

.button--variant-plain.button--intent-primary:disabled,
    .button--variant-plain.button--intent-primary.button--disabled {
      color: var(--s-interactive-primary-disabled);
    }

.button--variant-plain.button--intent-primary:disabled .button__icon, .button--variant-plain.button--intent-primary.button--disabled .button__icon {
        color: var(--s-interactive-primary-disabled);
      }

.button--variant-plain.button--intent-primary .button__icon {
      color: var(--s-interactive-primary-default);
    }

.button--variant-plain .button__icon {
    margin-left: 0;
    color: var(--swirl-plain-button-text-color-default);
  }

.button--variant-plain.button--size-l {
    padding: var(--s-space-12) var(--s-space-20);
  }

.button--variant-plain.button--size-l.button--icon-only {
      padding: var(--s-space-12);
    }

.button--variant-on-image {
  color: var(--s-text-on-image);
  background: rgba(0, 0, 0, 0.6);
}

.button--variant-on-image:hover {
    background: rgba(0, 0, 0, 0.5);
  }

.button--variant-on-image:active {
    background: rgba(0, 0, 0, 0.4);
  }

.button--variant-on-image:disabled,
  .button--variant-on-image.button--disabled {
    color: var(--s-text-on-image);
    background: rgba(0, 0, 0, 0.3);
  }

.button--variant-on-image:disabled .button__icon, .button--variant-on-image.button--disabled .button__icon {
      color: var(--s-icon-on-image);
    }

.button--variant-on-image .button__icon {
    color: var(--s-icon-on-image);
  }

.button--variant-on-image.button--size-l {
    padding: var(--s-space-12) var(--s-space-20);
  }

.button--variant-on-image.button--size-l.button--icon-only {
      padding: var(--s-space-12);
    }

.button--variant-floating {
  color: var(--s-text-default);
  background-color: var(--s-surface-overlay-default);
}

.button--variant-floating:not(.button--elevated) {
    box-shadow: var(--s-shadow-level-1);
  }

.button--variant-floating:hover {
    color: var(--s-text-on-action-primary);
    background-color: var(--s-state-hovered);
  }

.button--variant-floating:active {
    color: var(--s-text-on-action-primary);
    background-color: var(--s-state-pressed);
  }

.button--variant-floating.button--icon-only {
    padding: var(--s-space-12);
  }

.button--variant-floating.button--intent-primary {
    padding: var(--s-space-12) var(--s-space-20);
    border-radius: 1.5rem;
    color: var(--s-text-on-action-primary);
    background-color: var(--s-action-primary-default);
  }

.button--variant-floating.button--intent-primary:hover:where(:not(:disabled):not(.button--disabled)) {
      color: var(--s-text-on-action-primary);
      background-color: var(--s-action-primary-hovered);
    }

.button--variant-floating.button--intent-primary:active:where(:not(:disabled):not(.button--disabled)) {
      color: var(--s-text-on-action-primary);
      background-color: var(--s-action-primary-pressed);
    }

.button--variant-floating.button--intent-primary:disabled,
    .button--variant-floating.button--intent-primary.button--disabled {
      color: var(--s-text-on-action-primary);
    }

.button--variant-floating.button--intent-primary:disabled .button__icon, .button--variant-floating.button--intent-primary.button--disabled .button__icon {
        color: var(--s-icon-on-action-primary);
      }

.button--variant-floating.button--intent-primary.button--icon-only {
      padding: var(--s-space-12);
    }

.button--variant-floating.button--intent-primary .button__icon {
      color: var(--s-icon-on-action-primary);
    }

.button--variant-floating .button__icon {
    color: var(--s-icon-strong);
  }

.button--variant-translucent {
  color: var(--s-text-default);
  outline: var(--s-border-width-default) solid
    var(--s-border-translucent-outline);
  outline-offset: calc(var(--s-border-width-default) * -1);
  background: var(--s-translucent-medium-default);
  box-shadow: var(--s-shadow-level-2);
  -webkit-backdrop-filter: blur(var(--s-blur-s));
          backdrop-filter: blur(var(--s-blur-s));
}

.button--variant-translucent:hover {
    background: var(--s-translucent-medium-hovered);
  }

.button--variant-translucent:active {
    background: var(--s-translucent-medium-pressed);
  }

.button--variant-translucent .button__icon {
    color: var(--s-icon-strong);
  }

.button--variant-translucent:disabled,
  .button--variant-translucent.button--disabled {
    color: var(--s-text-subdued);
    background: var(--s-translucent-medium-default);
  }

.button--variant-translucent:disabled .button__icon, .button--variant-translucent.button--disabled .button__icon {
      color: var(--s-icon-default);
    }

.button--icon-position-end .button__icon {
    margin-right: calc(-1 * var(--s-space-4));
    margin-left: 0;
    order: 2;
  }

.button--pill {
  border-radius: 1.25rem;
}

.button--pill.button--size-l {
    border-radius: 1.5rem;
  }

@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {

.button--pill.button--size-l {
      border-radius: 1.375rem
  }
    }

@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {

.button--pill {
    border-radius: 1.125rem
}
  }

.button--icon-only {
  padding: var(--s-space-8);
}

.button--icon-only.button--pill {
    border-top-left-radius: var(--swirl-icon-button-border-top-left-radius);
    border-top-right-radius: var(--swirl-icon-button-border-top-right-radius);
    border-bottom-right-radius: var(
      --swirl-icon-button-border-bottom-right-radius
    );
    border-bottom-left-radius: var(
      --swirl-icon-button-border-bottom-left-radius
    );
  }

.button--icon-only .button__icon {
    margin-right: 0;
    margin-left: 0;
  }

.button--has-icon .button__icon {
    display: inline-flex;
  }

.button__tag {
  padding-left: var(--s-space-8);
  order: 3;
}

.button__trailing-slot {
  order: 4;
}

.button__icon {
  display: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: calc(-1 * var(--s-space-4));
  color: var(--s-icon-default);
  order: 0;
}

@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {

.button__icon {
    width: 1.25rem;
    height: 1.25rem
}
  }

.button__label {
  overflow: hidden;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  order: 1;
}