/**
 * Convert a font size to a dynamic font size.
 * Fonts that participate in Dynamic Type should use
 * dynamic font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param unit (optional) - The unit to convert to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a maximum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a minimum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * maximum and minimum font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * A heuristic that applies CSS to tablet
 * viewports.
 *
 * Usage:
 * @include tablet-viewport() {
 *   :host {
 *     background-color: green;
 *   }
 * }
 */
/**
   * A heuristic that applies CSS to mobile
   * viewports (i.e. phones, not tablets).
   *
   * Usage:
   * @include mobile-viewport() {
   *   :host {
   *     background-color: blue;
   *   }
   * }
   */
:host {
  --button-border-width: 1px;
  --button-border-width-start: var(--button-border-width);
  --button-border-width-end: var(--button-border-width);
  --button-border-width-top: var(--button-border-width);
  --button-border-width-bottom: var(--button-border-width);
  --button-gap: 8px;
  --button-justify-content: center;
  --button-border-radius-top-start: var(--button-border-radius);
  --button-border-radius-top-end: var(--button-border-radius);
  --button-border-radius-bottom-end: var(--button-border-radius);
  --button-border-radius-bottom-start: var(--button-border-radius);
  --button-padding-start: 16px;
  --button-padding-end: 16px;
  --button-icon-size: var(--cpls-font-size-body-l);
  --button-font-weight: 500;
  --button-primary-color: var(--cpsl-color-primary-button-text);
  --button-primary-background-color: var(--cpsl-color-primary-button-surface-default);
  --button-primary-border-color: var(--cpsl-color-primary-button-border-default);
  --button-primary-icon-color: var(--cpsl-color-primary-button-text);
  --button-primary-disabled-color: var(--cpsl-color-text-disabled);
  --button-primary-disabled-background-color: var(--cpsl-color-primary-button-surface-disabled);
  --button-primary-disabled-border-color: var(--cpsl-color-primary-button-border-disabled);
  --button-primary-disabled-icon-color: var(--cpsl-color-text-disabled);
  --button-primary-hover-color: var(--cpsl-color-primary-button-text);
  --button-primary-hover-background-color: var(--cpsl-color-primary-button-surface-hover);
  --button-primary-hover-border-color: var(--cpsl-color-primary-button-surface-hover);
  --button-primary-hover-icon-color: var(--cpsl-color-primary-button-text);
  --button-primary-active-color: var(--cpsl-color-primary-button-text);
  --button-primary-active-background-color: var(--cpsl-color-primary-button-surface-pressed);
  --button-primary-active-border-color: var(--cpsl-color-primary-button-surface-pressed);
  --button-primary-active-icon-color: var(--cpsl-color-primary-button-text);
  --button-secondary-color: var(--cpsl-color-secondary-button-text);
  --button-secondary-background-color: var(--cpsl-color-secondary-button-surface-default);
  --button-secondary-border-color: var(--cpsl-color-secondary-button-border-default);
  --button-secondary-icon-color: var(--cpsl-color-secondary-button-text);
  --button-secondary-disabled-color: var(--cpsl-color-text-disabled);
  --button-secondary-disabled-background-color: var(--cpsl-color-secondary-button-surface-disabled);
  --button-secondary-disabled-border-color: var(--cpsl-color-secondary-button-border-disabled);
  --button-secondary-disabled-icon-color: var(--cpsl-color-secondary-button-text);
  --button-secondary-hover-color: var(--cpsl-color-secondary-button-text);
  --button-secondary-hover-background-color: var(--cpsl-color-secondary-button-surface-hover);
  --button-secondary-hover-border-color: var(--cpsl-color-secondary-button-border-default);
  --button-secondary-hover-icon-color: var(--cpsl-color-secondary-button-text);
  --button-secondary-active-color: var(--cpsl-color-secondary-button-text);
  --button-secondary-active-background-color: var(--cpsl-color-secondary-button-surface-pressed);
  --button-secondary-active-border-color: var(--cpsl-color-secondary-button-border-default);
  --button-secondary-active-icon-color: var(--cpsl-color-secondary-button-text);
  --button-tertiary-color: var(--cpsl-color-tertiary-button-text);
  --button-tertiary-background-color: var(--cpsl-color-tertiary-button-surface-default);
  --button-tertiary-border-color: var(--cpsl-color-tertiary-button-border-default);
  --button-tertiary-icon-color: var(--cpsl-color-tertiary-button-text);
  --button-tertiary-disabled-color: var(--cpsl-color-text-disabled);
  --button-tertiary-disabled-background-color: var(--cpsl-color-tertiary-button-surface-disabled);
  --button-tertiary-disabled-border-color: var(--cpsl-color-tertiary-button-border-disabled);
  --button-tertiary-disabled-icon-color: var(--cpsl-color-tertiary-button-text);
  --button-tertiary-hover-color: var(--cpsl-color-tertiary-button-text);
  --button-tertiary-hover-background-color: var(--cpsl-color-tertiary-button-surface-hover);
  --button-tertiary-hover-border-color: var(--cpsl-color-tertiary-button-surface-hover);
  --button-tertiary-hover-icon-color: var(--cpsl-color-tertiary-button-text);
  --button-tertiary-active-color: var(--cpsl-color-tertiary-button-text);
  --button-tertiary-active-background-color: var(--cpsl-color-tertiary-button-surface-pressed);
  --button-tertiary-active-border-color: var(--cpsl-color-tertiary-button-surface-pressed);
  --button-tertiary-active-icon-color: var(--cpsl-color-tertiary-button-text);
  --button-ghost-color: var(--cpsl-color-ghost-button-default);
  --button-ghost-disabled-color: var(--cpsl-color-ghost-button-disabled);
  --button-ghost-hover-color: var(--cpsl-color-ghost-button-hover);
  --button-destructive-color: var(--cpsl-color-destructive-button-text);
  --button-destructive-background-color: var(--cpsl-color-destructive-button-surface-default);
  --button-destructive-border-color: var(--cpsl-color-destructive-button-border-default);
  --button-destructive-icon-color: var(--cpsl-color-destructive-button-text);
  --button-destructive-disabled-color: var(--cpsl-color-text-disabled);
  --button-destructive-disabled-background-color: var(--cpsl-color-destructive-button-surface-disabled);
  --button-destructive-disabled-border-color: var(--cpsl-color-destructive-button-border-disabled);
  --button-destructive-disabled-icon-color: var(--cpsl-color-destructive-button-text);
  --button-destructive-hover-color: var(--cpsl-color-destructive-button-text);
  --button-destructive-hover-background-color: var(--cpsl-color-destructive-button-surface-hover);
  --button-destructive-hover-border-color: var(--cpsl-color-destructive-button-border-default);
  --button-destructive-hover-icon-color: var(--cpsl-color-destructive-button-text);
  --button-destructive-active-color: var(--cpsl-color-destructive-button-text);
  --button-destructive-active-background-color: var(--cpsl-color-destructive-button-surface-pressed);
  --button-destructive-active-border-color: var(--cpsl-color-destructive-button-border-default);
  --button-destructive-active-icon-color: var(--cpsl-color-destructive-button-text);
  height: fit-content;
  width: fit-content;
  display: inline-block;
  font-family: var(--cpsl-font-family, inherit);
  -webkit-tap-highlight-color: transparent;
}
:host a {
  height: fit-content;
  width: auto !important;
}

:host(.full-width) {
  width: 100%;
  display: block;
}
:host(.full-width) .button-native {
  width: 100%;
}

:host(.xSmall) {
  --button-font-size: var(--cpsl-font-size-body-xs);
  --button-padding-top: 8px;
  --button-padding-bottom: 8px;
  --button-icon-size: var(--cpsl-font-size-body-s);
  --button-border-radius: 8px;
}

:host(.xSmall.primary) {
  --button-padding-top: 9px;
  --button-padding-bottom: 9px;
  --button-border-radius: 8px;
}

:host(.xSmall.secondary) {
  --button-border-radius: 8px;
}

:host(.xSmall.tertiary) {
  --button-padding-top: 9px;
  --button-padding-bottom: 9px;
  --button-border-radius: 8px;
}

:host(.small) {
  --button-font-size: var(--cpsl-font-size-body-s);
  --button-padding-top: 12px;
  --button-padding-bottom: 12px;
  --button-icon-size: var(--cpsl-font-size-body-m);
}

:host(.small.primary) {
  --button-padding-top: 13px;
  --button-padding-bottom: 13px;
}

:host(.small.tertiary) {
  --button-padding-top: 13px;
  --button-padding-bottom: 13px;
}

:host(.medium) {
  --button-font-size: var(--cpsl-font-size-body-m);
  --button-padding-top: 14px;
  --button-padding-bottom: 14px;
  --button-icon-size: var(--cpsl-font-size-body-l);
}
:host(.medium) :host(.primary) {
  --button-padding-top: 15px;
  --button-padding-bottom: 15px;
}
:host(.medium) :host(.tertiary) {
  --button-padding-top: 15px;
  --button-padding-bottom: 15px;
}

:host(.medium.primary) {
  --button-padding-top: 15px;
  --button-padding-bottom: 15px;
}

:host(.medium.tertiary) {
  --button-padding-top: 15px;
  --button-padding-bottom: 15px;
}

:host(.disabled) {
  cursor: default;
  pointer-events: none;
}

:host ::slotted(cpsl-icon) {
  --height: var(--button-icon-size);
  --width: var(--button-icon-size);
}

:host(.primary) {
  --button-border-radius: var(--cpsl-border-radius-primary-button);
  --button-color: var(--button-primary-color);
  --button-background-color: var(--button-primary-background-color);
  --button-border-color: var(--button-primary-border-color);
  --button-padding-start: 17px;
  --button-padding-end: 17px;
  --button-border-width: 0px;
}
:host(.primary) ::slotted(cpsl-icon) {
  --icon-color: var(--button-primary-icon-color);
}
:host(.primary):host(.disabled) {
  --button-color: var(--button-primary-disabled-color);
  --button-background-color: var(--button-primary-disabled-background-color);
  --button-border-color: var(--button-primary-disabled-border-color);
  --button-outline-color: transparent;
}
:host(.primary):host(.disabled) ::slotted(cpsl-icon) {
  --icon-color: var(--button-primary-disabled-icon-color);
}
:host(.primary):host(.disabled) ::slotted(cpsl-spinner) {
  --background-color: var(--button-primary-disabled-background-color);
}
:host(.primary) :not(.disabled):hover {
  --button-color: var(--button-primary-hover-color);
  --button-background-color: var(--button-primary-hover-background-color);
  --button-border-color: var(--button-primary-hover-border-color);
}
:host(.primary) :not(.disabled):hover ::slotted(cpsl-icon) {
  --icon-color: var(--button-primary-hover-icon-color);
}
:host(.primary) :not(.disabled):active {
  --button-color: var(--button-primary-active-color);
  --button-background-color: var(--button-primary-active-background-color);
  --button-border-color: var(--button-primary-active-border-color);
}
:host(.primary) :not(.disabled):active ::slotted(cpsl-icon) {
  --icon-color: var(--button-primary-active-icon-color);
}
:host(.primary) :not(.disabled):focus-visible {
  --button-outline-color: var(--cpsl-color-primary-button-outline);
}

:host(.secondary) {
  --button-border-radius: var(--cpsl-border-radius-destructive-button);
  --button-color: var(--button-secondary-color);
  --button-background-color: var(--button-secondary-background-color);
  --button-border-color: var(--button-secondary-border-color);
}
:host(.secondary) ::slotted(cpsl-icon) {
  --icon-color: var(--button-secondary-icon-color);
}
:host(.secondary):host(.disabled) {
  --button-color: var(--button-secondary-disabled-color);
  --button-background-color: var(--button-secondary-disabled-background-color);
  --button-border-color: var(--button-secondary-disabled-border-color);
  --button-outline-color: transparent;
}
:host(.secondary):host(.disabled) ::slotted(cpsl-icon) {
  --icon-color: var(--button-secondary-disabled-icon-color);
}
:host(.secondary):host(.disabled) ::slotted(cpsl-spinner) {
  --background-color: var(--button-secondary-disabled-icon-color);
}
:host(.secondary) :not(.disabled):hover {
  --button-color: var(--button-secondary-hover-color);
  --button-border-color: var(--button-secondary-hover-border-color);
  --button-background-color: var(--button-secondary-hover-background-color);
}
:host(.secondary) :not(.disabled):hover ::slotted(cpsl-icon) {
  --icon-color: var(--button-secondary-hover-icon-color);
}
:host(.secondary) :not(.disabled):active {
  --button-color: var(--button-secondary-active-color);
  --button-border-color: var(--button-secondary-active-border-color);
  --button-background-color: var(--button-secondary-active-background-color);
}
:host(.secondary) :not(.disabled):active ::slotted(cpsl-icon) {
  --icon-color: var(--button-secondary-active-icon-color);
}
:host(.secondary) :not(.disabled):focus-visible {
  --button-outline-color: var(--cpsl-color-secondary-button-outline);
}

:host(.tertiary) {
  --button-border-radius: var(--cpsl-border-radius-tertiary-button);
  --button-color: var(--button-tertiary-color);
  --button-background-color: var(--button-tertiary-background-color);
  --button-border-color: var(--button-tertiary-border-color);
  --button-padding-start: 17px;
  --button-padding-end: 17px;
  --button-border-width: 0px;
}
:host(.tertiary) ::slotted(cpsl-icon) {
  --icon-color: var(--button-tertiary-icon-color);
}
:host(.tertiary):host(.disabled) {
  --button-color: var(--button-tertiary-disabled-color);
  --button-background-color: var(--button-tertiary-disabled-background-color);
  --button-border-color: var(--button-tertiary-disabled-border-color);
  --button-outline-color: transparent;
}
:host(.tertiary):host(.disabled) ::slotted(cpsl-icon) {
  --icon-color: var(--button-tertiary-disabled-icon-color);
}
:host(.tertiary):host(.disabled) ::slotted(cpsl-spinner) {
  --background-color: var(--button-tertiary-disabled-icon-color);
}
:host(.tertiary) :not(.disabled):hover {
  --button-color: var(--button-tertiary-hover-color);
  --button-background-color: var(--button-tertiary-hover-background-color);
  --button-border-color: var(--button-tertiary-hover-border-color);
}
:host(.tertiary) :not(.disabled):hover ::slotted(cpsl-icon) {
  --icon-color: var(--button-tertiary-hover-icon-color);
}
:host(.tertiary) :not(.disabled):active {
  --button-color: var(--button-tertiary-active-color);
  --button-background-color: var(--button-tertiary-active-background-color);
  --button-border-color: var(--button-tertiary-active-border-color);
}
:host(.tertiary) :not(.disabled):active ::slotted(cpsl-icon) {
  --icon-color: var(--button-tertiary-active-icon-color);
}
:host(.tertiary) :not(.disabled):focus-visible {
  --button-outline-color: var(--cpsl-color-tertiary-button-outline);
}

:host(.ghost) {
  --button-color: var(--button-ghost-color);
  --button-background-color: transparent;
  --button-border-color: transparent;
  --button-outline-color: transparent;
  --button-padding-start: 0px;
  --button-padding-end: 0px;
  --button-padding-top: 0px;
  --button-padding-bottom: 0px;
  --button-border-width: 0px;
}
:host(.ghost) ::slotted(cpsl-icon) {
  --icon-color: var(--button-ghost-color);
}
:host(.ghost):host(.disabled) {
  --button-color: var(--button-ghost-disabled-color);
}
:host(.ghost):host(.disabled) ::slotted(cpsl-icon) {
  --icon-color: var(--button-ghost-disabled-color);
}
:host(.ghost):host(.disabled) ::slotted(cpsl-spinner) {
  --background-color: var(--button-ghost-disabled-color);
}
:host(.ghost) :not(.disabled):hover {
  --button-color: var(--button-ghost-hover-color);
}
:host(.ghost) :not(.disabled):hover ::slotted(cpsl-icon) {
  --icon-color: var(--button-ghost-hover-color);
}

:host(.destructive) {
  --button-border-radius: var(--cpsl-border-radius-secondary-button);
  --button-color: var(--button-destructive-color);
  --button-background-color: var(--button-destructive-background-color);
  --button-border-color: var(--button-destructive-border-color);
}
:host(.destructive) ::slotted(cpsl-icon) {
  --icon-color: var(--button-destructive-icon-color);
}
:host(.destructive):host(.disabled) {
  --button-color: var(--button-destructive-disabled-color);
  --button-background-color: var(--button-destructive-disabled-background-color);
  --button-border-color: var(--button-destructive-disabled-border-color);
  --button-outline-color: transparent;
}
:host(.destructive):host(.disabled) ::slotted(cpsl-icon) {
  --icon-color: var(--button-destructive-disabled-icon-color);
}
:host(.destructive) :not(.disabled):hover {
  --button-color: var(--button-destructive-hover-color);
  --button-border-color: var(--button-destructive-hover-border-color);
  --button-background-color: var(--button-destructive-hover-background-color);
}
:host(.destructive) :not(.disabled):hover ::slotted(cpsl-icon) {
  --icon-color: var(--button-destructive-hover-icon-color);
}
:host(.destructive) :not(.disabled):active {
  --button-color: var(--button-destructive-active-color);
  --button-border-color: var(--button-destructive-active-border-color);
  --button-background-color: var(--button-destructive-active-background-color);
}
:host(.destructive) :not(.disabled):active ::slotted(cpsl-icon) {
  --icon-color: var(--button-destructive-active-icon-color);
}
:host(.destructive) :not(.disabled):focus-visible {
  --button-outline-color: var(--cpsl-color-destructive-button-outline);
}

.button-native {
  border-top-left-radius: var(--button-border-radius-top-start);
  border-top-right-radius: var(--button-border-radius-top-end);
  border-bottom-right-radius: var(--button-border-radius-bottom-end);
  border-bottom-left-radius: var(--button-border-radius-bottom-start);
  -webkit-padding-start: var(--button-padding-start);
  padding-inline-start: var(--button-padding-start);
  -webkit-padding-end: var(--button-padding-end);
  padding-inline-end: var(--button-padding-end);
  padding-top: var(--button-padding-top);
  padding-bottom: var(--button-padding-bottom);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  font-family: inherit;
  white-space: nowrap;
  text-decoration: none;
  border: 0px solid transparent;
  border-width: var(--button-border-width-top) var(--button-border-width-end) var(--button-border-width-bottom) var(--button-border-width-start);
  cursor: var(--cursor);
  color: var(--button-color);
  background: var(--button-background-color);
  border-color: var(--button-border-color);
  display: flex;
  justify-content: var(--button-justify-content);
  align-items: center;
  height: 100%;
  gap: var(--button-gap);
  word-break: break-all;
  outline-color: var(--button-outline-color);
  -webkit-tap-highlight-color: transparent;
}
:host-context([dir=rtl]) .button-native {
  border-top-left-radius: var(--button-border-radius-top-end);
  border-top-right-radius: var(--button-border-radius-top-start);
  border-bottom-right-radius: var(--button-border-radius-bottom-start);
  border-bottom-left-radius: var(--button-border-radius-bottom-end);
}

[dir=rtl] .button-native {
  border-top-left-radius: var(--button-border-radius-top-end);
  border-top-right-radius: var(--button-border-radius-top-start);
  border-bottom-right-radius: var(--button-border-radius-bottom-start);
  border-bottom-left-radius: var(--button-border-radius-bottom-end);
}

@supports selector(:dir(rtl)) {
  .button-native:dir(rtl) {
    border-top-left-radius: var(--button-border-radius-top-end);
    border-top-right-radius: var(--button-border-radius-top-start);
    border-bottom-right-radius: var(--button-border-radius-bottom-start);
    border-bottom-left-radius: var(--button-border-radius-bottom-end);
  }
}

:host ::slotted(cpsl-text) {
  --color-override: var(--button-color);
}
:host ::slotted(cpsl-icon-group) {
  --container-border-color: var(--button-background-color);
}
:host ::slotted(cpsl-spinner) {
  --background-color: var(--button-background-color);
}