* {
  box-sizing: border-box;
}

*:active {
  outline: none;
}

*:focus-visible {
  outline: none;
  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
}

:host {
  box-shadow: none !important;
}

::-moz-focus-inner {
  border: none;
}

input,
textarea,
button {
  font-family: inherit;
  font-size: inherit;
  font-stretch: inherit;
}

:host(.sr),
:host(.sr) button {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.sr,
.sr button {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.hidden {
  display: none;
}

:host([hidden]) {
  display: none;
}

.invisible {
  visibility: hidden;
}

@container style(--t-prefers-motion: "reduced") {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }
}
@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      animation-delay: 0ms !important;
      transition-delay: 0ms !important;
    }
  }
}
* {
  box-sizing: border-box;
}

*:active {
  outline: none;
}

*:focus-visible {
  outline: none;
  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
}

:host {
  box-shadow: none !important;
}

::-moz-focus-inner {
  border: none;
}

input,
textarea,
button {
  font-family: inherit;
  font-size: inherit;
  font-stretch: inherit;
}

:host(.sr),
:host(.sr) button {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.sr,
.sr button {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.hidden {
  display: none;
}

:host([hidden]) {
  display: none;
}

.invisible {
  visibility: hidden;
}

@container style(--t-prefers-motion: "reduced") {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }
}
@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      animation-delay: 0ms !important;
      transition-delay: 0ms !important;
    }
  }
}
/**
 * @prop --tct-btn-border?: (*) Controls the optional border shorthand of the button.
 * @prop --tct-btn-border-radius: (<length-percentage>) Controls the corner radius of the button.
 * @prop --tct-btn-tween: (*) Controls the transition timing of button state changes.
 * @prop --tct-btn-padding: (<length-percentage>+) Controls the inner padding of the button.
 * @prop --tct-btn-padding-inline?: (<length-percentage>+) Controls the optional inline padding of the plain button (no intent, no icon-only).
 * @prop --tct-btn-height: (<length>) Controls the height of the plain button (no intent, no icon-only).
 * @prop --tct-btn-min-height?: (<length>) Controls the optional minimum height of the button.
 * @prop --tct-btn-font-size?: (<length-percentage>) Controls the optional font size of the button.
 * @prop --tct-btn-font-weight?: (<number>) Controls the optional font weight of the plain button.
 * @prop --tct-btn-letter-spacing?: (<length>) Controls the optional letter spacing of the button label.
 * @prop --tct-btn-text-transform?: (<custom-ident>) Controls the optional text-transform of the button label.
 * @prop --tct-btn-disabled-opacity: (<number>) Controls the opacity of the button when disabled.
 * @prop --tct-btn-hover-background?: (<color>) Controls the optional background color of the plain button on hover and focus.
 * @prop --tct-btn-default-double-focus-visible-ring: (*) Controls the double focus-visible ring box shadow applied to buttons without an intent.
 * @prop --tct-btn-font-size-small: (<length-percentage>) Controls the font size of the button when size is small.
 * @prop --tct-btn-font-size-medium: (<length-percentage>) Controls the font size of the button when size is medium.
 * @prop --tct-btn-font-size-large: (<length-percentage>) Controls the font size of the button when size is large.
 * @prop --tct-btn-line-height-small: (<length-percentage>) Controls the line height of the button when size is small.
 * @prop --tct-btn-line-height-medium: (<length-percentage>) Controls the line height of the button when size is medium.
 * @prop --tct-btn-line-height-large: (<length-percentage>) Controls the line height of the button when size is large.
 * @prop --tct-btn-min-height-small?: (<length>) Controls the optional minimum height of the button when size is small.
 * @prop --tct-btn-min-height-medium?: (<length>) Controls the optional minimum height of the button when size is medium.
 * @prop --tct-btn-min-height-large?: (<length>) Controls the optional minimum height of the button when size is large.
 * @prop --tct-btn-padding-size-small: (<length-percentage>+) Controls the inner padding of the button when size is small.
 * @prop --tct-btn-padding-size-medium: (<length-percentage>+) Controls the inner padding of the button when size is medium.
 * @prop --tct-btn-padding-size-large: (<length-percentage>+) Controls the inner padding of the button when size is large.
 * @prop --tct-btn-icon-size: (<length>) Controls the size of slotted icons inside the button.
 * @prop --tct-btn-icon-size-small: (<length>) Controls the size of slotted icons when size is small.
 * @prop --tct-btn-icon-size-medium?: (<length>) Controls the optional size of slotted icons when size is medium.
 * @prop --tct-btn-icon-size-large?: (<length>) Controls the optional size of slotted icons when size is large.
 * @prop --tct-btn-icon-width: (<length>) Controls the width of the icon-only button.
 * @prop --tct-btn-icon-height: (<length>) Controls the height of the icon-only button.
 * @prop --tct-btn-icon-border-radius?: (<length-percentage>) Controls the optional corner radius of the icon-only button.
 * @prop --tct-btn-icon-padding?: (<length-percentage>+) Controls the optional inner padding of the icon-only button.
 * @prop --tct-btn-icon-hover-background: (<color>) Controls the background color of the icon-only button on hover and focus.
 * @prop --tct-btn-icon-active-background: (<color>) Controls the background color of the icon-only button when active.
 * @prop --tct-btn-icon-hover-color: (<color>) Controls the text/icon color of the icon-only button on hover, focus, and active.
 * @prop --tct-btn-badge-background?: (<color>) Controls the optional background color of the deprecated badge button.
 * @prop --tct-btn-badge-font-color?: (<color>) Controls the optional text color of the deprecated badge button.
 * @prop --tct-btn-badge-font-size?: (<length-percentage>) Controls the optional font size of the deprecated badge button.
 * @prop --tct-btn-badge-padding: (<length-percentage>+) Controls the inner padding of the deprecated badge button.
 * @prop --tct-btn-badge-border-radius: (<length-percentage>) Controls the corner radius of the deprecated badge button.
 * @prop --tct-btn-badge-hover-background: (<color>) Controls the background color of the deprecated badge button on hover.
 * @prop --tct-btn-badge-hover-font-color: (<color>) Controls the text color of the deprecated badge button on hover.
 * @prop --tct-btn-badge-active-background: (<color>) Controls the background color of the deprecated badge button when active or selected.
 * @prop --tct-btn-badge-active-font-color: (<color>) Controls the text color of the deprecated badge button when active or selected.
 * @prop --tct-btn-coin-container-width: (<length>) Controls the width of the coin button wrapper.
 * @prop --tct-btn-coin-width: (<length>) Controls the width of the coin button.
 * @prop --tct-btn-coin-height: (<length>) Controls the height of the coin button.
 * @prop --tct-btn-coin-background: (<color>) Controls the background color of the coin button.
 * @prop --tct-btn-coin-backdrop-filter?: (*) Controls the optional backdrop-filter of the coin button.
 * @prop --tct-btn-coin-border?: (*) Controls the optional border shorthand of the coin button.
 * @prop --tct-btn-coin-border-radius: (<length-percentage>) Controls the corner radius of the coin button.
 * @prop --tct-btn-coin-box-shadow?: (*) Controls the optional box shadow of the coin button.
 * @prop --tct-btn-coin-hover-background: (<color>) Controls the background color of the coin button on hover.
 * @prop --tct-btn-coin-hover-box-shadow: (*) Controls the box shadow of the coin button on hover.
 * @prop --tct-btn-coin-focus-box-shadow?: (*) Controls the optional box shadow of the coin button on focus.
 * @prop --tct-btn-coin-focus-visible-box-shadow: (*) Controls the box shadow of the coin button when focused via keyboard.
 * @prop --tct-btn-coin-focus-ring: (<color>) Controls the focus ring color of the coin button.
 * @prop --tct-btn-coin-focus-visible-outer-ring-color: (<color>) Controls the outer ring color of the coin button when focused via keyboard.
 * @prop --tct-btn-coin-active-background?: (<color>) Controls the optional background color of the coin button when active.
 * @prop --tct-btn-coin-icon-stroke-primary: (<color>) Controls the primary stroke color of icons inside the coin button.
 * @prop --tct-btn-coin-icon-stroke-secondary: (<color>) Controls the secondary stroke color of icons inside the coin button.
 * @prop --tct-btn-coin-icon-stroke-width: (<length>) Controls the stroke width of icons inside the coin button.
 * @prop --tct-btn-coin-avatar-icon-stroke-primary: (<color>) Controls the primary stroke color of avatar icons inside the coin button.
 * @prop --tct-btn-coin-avatar-icon-stroke-secondary: (<color>) Controls the secondary stroke color of avatar icons inside the coin button.
 * @prop --tct-btn-coin-avatar-text-color: (<color>) Controls the text color of avatar initials inside the coin button.
 * @prop --tct-btn-coin-label-color: (<color>) Controls the text color of the coin button label.
 * @prop --tct-btn-coin-label-disabled-color: (<color>) Controls the text color of the coin button label when disabled.
 * @prop --tct-btn-coin-label-font-size: (<length-percentage>) Controls the font size of the coin button label.
 * @prop --tct-btn-coin-gap: (<length-percentage>) Controls the gap between the coin button and its label.
 * @prop --tct-btn-primary-background: (<color>) Controls the background color of the primary-intent button.
 * @prop --tct-btn-primary-backdrop-filter?: (*) Controls the optional backdrop-filter of the primary-intent button.
 * @prop --tct-btn-primary-border-color: (<color>) Controls the border color of the primary-intent button.
 * @prop --tct-btn-primary-border-style: (<custom-ident>) Controls the border style of the primary-intent button.
 * @prop --tct-btn-primary-border-width: (<length>+) Controls the border width of the primary-intent button.
 * @prop --tct-btn-primary-font-color: (<color>) Controls the text color of the primary-intent button.
 * @prop --tct-btn-primary-font-weight: (<number>) Controls the font weight of the primary-intent button.
 * @prop --tct-btn-primary-text-decoration: (<custom-ident>) Controls the text-decoration of the primary-intent button.
 * @prop --tct-btn-primary-box-shadow: (*) Controls the box shadow of the primary-intent button.
 * @prop --tct-btn-primary-icon-color: (<color>) Controls the icon color of the primary-intent button.
 * @prop --tct-btn-primary-tween: (*) Controls the transition timing of primary-intent button state changes.
 * @prop --tct-btn-primary-compositor-transform?: (*) Controls the optional compositor transform used during primary-intent button interactions.
 * @prop --tct-btn-primary-active-scale: (<number>) Controls the scale of the primary-intent button when active.
 * @prop --tct-btn-primary-hover-background: (<color>) Controls the background color of the primary-intent button on hover.
 * @prop --tct-btn-primary-hover-border-color: (<color>) Controls the border color of the primary-intent button on hover.
 * @prop --tct-btn-primary-hover-font-color: (<color>) Controls the text color of the primary-intent button on hover.
 * @prop --tct-btn-primary-hover-text-decoration: (<custom-ident>) Controls the text-decoration of the primary-intent button on hover.
 * @prop --tct-btn-primary-hover-inner-ring-color: (<color>) Controls the inner ring color of the primary-intent button on hover.
 * @prop --tct-btn-primary-hover-outer-ring-color: (<color>) Controls the outer ring color of the primary-intent button on hover.
 * @prop --tct-btn-primary-hover-box-shadow: (*) Controls the box shadow of the primary-intent button on hover.
 * @prop --tct-btn-primary-focus-background: (<color>) Controls the background color of the primary-intent button on focus.
 * @prop --tct-btn-primary-focus-border-color: (<color>) Controls the border color of the primary-intent button on focus.
 * @prop --tct-btn-primary-focus-font-color: (<color>) Controls the text color of the primary-intent button on focus.
 * @prop --tct-btn-primary-focus-text-decoration: (<custom-ident>) Controls the text-decoration of the primary-intent button on focus.
 * @prop --tct-btn-primary-focus-box-shadow: (*) Controls the box shadow of the primary-intent button on focus.
 * @prop --tct-btn-primary-focus-visible-background: (<color>) Controls the background color of the primary-intent button when focused via keyboard.
 * @prop --tct-btn-primary-focus-visible-border-color: (<color>) Controls the border color of the primary-intent button when focused via keyboard.
 * @prop --tct-btn-primary-focus-visible-font-color: (<color>) Controls the text color of the primary-intent button when focused via keyboard.
 * @prop --tct-btn-primary-focus-visible-text-decoration: (<custom-ident>) Controls the text-decoration of the primary-intent button when focused via keyboard.
 * @prop --tct-btn-primary-focus-visible-inner-ring-color: (<color>) Controls the inner ring color of the primary-intent button when focused via keyboard.
 * @prop --tct-btn-primary-focus-visible-outer-ring-color: (<color>) Controls the outer ring color of the primary-intent button when focused via keyboard.
 * @prop --tct-btn-primary-focus-visible-box-shadow: (*) Controls the box shadow of the primary-intent button when focused via keyboard.
 * @prop --tct-btn-primary-active-background: (<color>) Controls the background color of the primary-intent button when active.
 * @prop --tct-btn-primary-active-border-color: (<color>) Controls the border color of the primary-intent button when active.
 * @prop --tct-btn-primary-active-font-color: (<color>) Controls the text color of the primary-intent button when active.
 * @prop --tct-btn-primary-active-text-decoration: (<custom-ident>) Controls the text-decoration of the primary-intent button when active.
 * @prop --tct-btn-primary-disabled-background: (<color>) Controls the background color of the primary-intent button when disabled.
 * @prop --tct-btn-primary-disabled-border-color: (<color>) Controls the border color of the primary-intent button when disabled.
 * @prop --tct-btn-primary-disabled-font-color: (<color>) Controls the text color of the primary-intent button when disabled.
 * @prop --tct-btn-primary-disabled-text-decoration: (<custom-ident>) Controls the text-decoration of the primary-intent button when disabled.
 * @prop --tct-btn-secondary-background: (<color>) Controls the background color of the secondary-intent button.
 * @prop --tct-btn-secondary-backdrop-filter?: (*) Controls the optional backdrop-filter of the secondary-intent button.
 * @prop --tct-btn-secondary-border-color: (<color>) Controls the border color of the secondary-intent button.
 * @prop --tct-btn-secondary-border-style: (<custom-ident>) Controls the border style of the secondary-intent button.
 * @prop --tct-btn-secondary-border-width: (<length>+) Controls the border width of the secondary-intent button.
 * @prop --tct-btn-secondary-font-color: (<color>) Controls the text color of the secondary-intent button.
 * @prop --tct-btn-secondary-font-weight: (<number>) Controls the font weight of the secondary-intent button.
 * @prop --tct-btn-secondary-text-decoration: (<custom-ident>) Controls the text-decoration of the secondary-intent button.
 * @prop --tct-btn-secondary-box-shadow: (*) Controls the box shadow of the secondary-intent button.
 * @prop --tct-btn-secondary-icon-color: (<color>) Controls the icon color of the secondary-intent button.
 * @prop --tct-btn-secondary-hover-background: (<color>) Controls the background color of the secondary-intent button on hover.
 * @prop --tct-btn-secondary-hover-border-color: (<color>) Controls the border color of the secondary-intent button on hover.
 * @prop --tct-btn-secondary-hover-font-color: (<color>) Controls the text color of the secondary-intent button on hover.
 * @prop --tct-btn-secondary-hover-text-decoration: (<custom-ident>) Controls the text-decoration of the secondary-intent button on hover.
 * @prop --tct-btn-secondary-hover-inner-ring-color: (<color>) Controls the inner ring color of the secondary-intent button on hover.
 * @prop --tct-btn-secondary-hover-outer-ring-color: (<color>) Controls the outer ring color of the secondary-intent button on hover.
 * @prop --tct-btn-secondary-hover-box-shadow: (*) Controls the box shadow of the secondary-intent button on hover.
 * @prop --tct-btn-secondary-focus-background: (<color>) Controls the background color of the secondary-intent button on focus.
 * @prop --tct-btn-secondary-focus-border-color: (<color>) Controls the border color of the secondary-intent button on focus.
 * @prop --tct-btn-secondary-focus-font-color: (<color>) Controls the text color of the secondary-intent button on focus.
 * @prop --tct-btn-secondary-focus-text-decoration: (<custom-ident>) Controls the text-decoration of the secondary-intent button on focus.
 * @prop --tct-btn-secondary-focus-box-shadow: (*) Controls the box shadow of the secondary-intent button on focus.
 * @prop --tct-btn-secondary-focus-visible-background: (<color>) Controls the background color of the secondary-intent button when focused via keyboard.
 * @prop --tct-btn-secondary-focus-visible-border-color: (<color>) Controls the border color of the secondary-intent button when focused via keyboard.
 * @prop --tct-btn-secondary-focus-visible-font-color: (<color>) Controls the text color of the secondary-intent button when focused via keyboard.
 * @prop --tct-btn-secondary-focus-visible-text-decoration: (<custom-ident>) Controls the text-decoration of the secondary-intent button when focused via keyboard.
 * @prop --tct-btn-secondary-focus-visible-inner-ring-color: (<color>) Controls the inner ring color of the secondary-intent button when focused via keyboard.
 * @prop --tct-btn-secondary-focus-visible-outer-ring-color: (<color>) Controls the outer ring color of the secondary-intent button when focused via keyboard.
 * @prop --tct-btn-secondary-focus-visible-box-shadow: (*) Controls the box shadow of the secondary-intent button when focused via keyboard.
 * @prop --tct-btn-secondary-active-background: (<color>) Controls the background color of the secondary-intent button when active.
 * @prop --tct-btn-secondary-active-border-color: (<color>) Controls the border color of the secondary-intent button when active.
 * @prop --tct-btn-secondary-active-font-color: (<color>) Controls the text color of the secondary-intent button when active.
 * @prop --tct-btn-secondary-active-text-decoration: (<custom-ident>) Controls the text-decoration of the secondary-intent button when active.
 * @prop --tct-btn-secondary-disabled-background: (<color>) Controls the background color of the secondary-intent button when disabled.
 * @prop --tct-btn-secondary-disabled-border-color: (<color>) Controls the border color of the secondary-intent button when disabled.
 * @prop --tct-btn-secondary-disabled-font-color: (<color>) Controls the text color of the secondary-intent button when disabled.
 * @prop --tct-btn-secondary-disabled-text-decoration: (<custom-ident>) Controls the text-decoration of the secondary-intent button when disabled.
 * @prop --tct-btn-neutral-background: (<color>) Controls the background color of the neutral-intent button.
 * @prop --tct-btn-neutral-backdrop-filter?: (*) Controls the optional backdrop-filter of the neutral-intent button.
 * @prop --tct-btn-neutral-border-color: (<color>) Controls the border color of the neutral-intent button.
 * @prop --tct-btn-neutral-border-style: (<custom-ident>) Controls the border style of the neutral-intent button.
 * @prop --tct-btn-neutral-border-width: (<length>+) Controls the border width of the neutral-intent button.
 * @prop --tct-btn-neutral-font-color: (<color>) Controls the text color of the neutral-intent button.
 * @prop --tct-btn-neutral-font-weight: (<number>) Controls the font weight of the neutral-intent button.
 * @prop --tct-btn-neutral-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-intent button.
 * @prop --tct-btn-neutral-box-shadow: (*) Controls the box shadow of the neutral-intent button.
 * @prop --tct-btn-neutral-icon-color: (<color>) Controls the icon color of the neutral-intent button.
 * @prop --tct-btn-neutral-hover-background: (<color>) Controls the background color of the neutral-intent button on hover.
 * @prop --tct-btn-neutral-hover-border-color: (<color>) Controls the border color of the neutral-intent button on hover.
 * @prop --tct-btn-neutral-hover-font-color: (<color>) Controls the text color of the neutral-intent button on hover.
 * @prop --tct-btn-neutral-hover-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-intent button on hover.
 * @prop --tct-btn-neutral-hover-inner-ring-color: (<color>) Controls the inner ring color of the neutral-intent button on hover.
 * @prop --tct-btn-neutral-hover-outer-ring-color: (<color>) Controls the outer ring color of the neutral-intent button on hover.
 * @prop --tct-btn-neutral-hover-box-shadow: (*) Controls the box shadow of the neutral-intent button on hover.
 * @prop --tct-btn-neutral-focus-background: (<color>) Controls the background color of the neutral-intent button on focus.
 * @prop --tct-btn-neutral-focus-border-color: (<color>) Controls the border color of the neutral-intent button on focus.
 * @prop --tct-btn-neutral-focus-font-color: (<color>) Controls the text color of the neutral-intent button on focus.
 * @prop --tct-btn-neutral-focus-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-intent button on focus.
 * @prop --tct-btn-neutral-focus-box-shadow: (*) Controls the box shadow of the neutral-intent button on focus.
 * @prop --tct-btn-neutral-focus-visible-background: (<color>) Controls the background color of the neutral-intent button when focused via keyboard.
 * @prop --tct-btn-neutral-focus-visible-border-color: (<color>) Controls the border color of the neutral-intent button when focused via keyboard.
 * @prop --tct-btn-neutral-focus-visible-font-color: (<color>) Controls the text color of the neutral-intent button when focused via keyboard.
 * @prop --tct-btn-neutral-focus-visible-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-intent button when focused via keyboard.
 * @prop --tct-btn-neutral-focus-visible-inner-ring-color: (<color>) Controls the inner ring color of the neutral-intent button when focused via keyboard.
 * @prop --tct-btn-neutral-focus-visible-outer-ring-color: (<color>) Controls the outer ring color of the neutral-intent button when focused via keyboard.
 * @prop --tct-btn-neutral-focus-visible-box-shadow: (*) Controls the box shadow of the neutral-intent button when focused via keyboard.
 * @prop --tct-btn-neutral-active-background: (<color>) Controls the background color of the neutral-intent button when active.
 * @prop --tct-btn-neutral-active-border-color: (<color>) Controls the border color of the neutral-intent button when active.
 * @prop --tct-btn-neutral-active-font-color: (<color>) Controls the text color of the neutral-intent button when active.
 * @prop --tct-btn-neutral-active-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-intent button when active.
 * @prop --tct-btn-neutral-disabled-background: (<color>) Controls the background color of the neutral-intent button when disabled.
 * @prop --tct-btn-neutral-disabled-border-color: (<color>) Controls the border color of the neutral-intent button when disabled.
 * @prop --tct-btn-neutral-disabled-font-color: (<color>) Controls the text color of the neutral-intent button when disabled.
 * @prop --tct-btn-neutral-disabled-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-intent button when disabled.
 * @prop --tct-btn-neutral-text-background: (<color>) Controls the background color of the neutral-text-intent button.
 * @prop --tct-btn-neutral-text-backdrop-filter?: (*) Controls the optional backdrop-filter of the neutral-text-intent button.
 * @prop --tct-btn-neutral-text-border-color: (<color>) Controls the border color of the neutral-text-intent button.
 * @prop --tct-btn-neutral-text-border-style: (<custom-ident>) Controls the border style of the neutral-text-intent button.
 * @prop --tct-btn-neutral-text-border-width: (<length>+) Controls the border width of the neutral-text-intent button.
 * @prop --tct-btn-neutral-text-font-color: (<color>) Controls the text color of the neutral-text-intent button.
 * @prop --tct-btn-neutral-text-font-weight: (<number>) Controls the font weight of the neutral-text-intent button.
 * @prop --tct-btn-neutral-text-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-text-intent button.
 * @prop --tct-btn-neutral-text-box-shadow?: (*) Controls the optional box shadow of the neutral-text-intent button.
 * @prop --tct-btn-neutral-text-icon-color: (<color>) Controls the icon color of the neutral-text-intent button.
 * @prop --tct-btn-neutral-text-hover-background: (<color>) Controls the background color of the neutral-text-intent button on hover.
 * @prop --tct-btn-neutral-text-hover-border-color: (<color>) Controls the border color of the neutral-text-intent button on hover.
 * @prop --tct-btn-neutral-text-hover-font-color: (<color>) Controls the text color of the neutral-text-intent button on hover.
 * @prop --tct-btn-neutral-text-hover-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-text-intent button on hover.
 * @prop --tct-btn-neutral-text-hover-inner-ring-color: (<color>) Controls the inner ring color of the neutral-text-intent button on hover.
 * @prop --tct-btn-neutral-text-hover-outer-ring-color: (<color>) Controls the outer ring color of the neutral-text-intent button on hover.
 * @prop --tct-btn-neutral-text-hover-box-shadow: (*) Controls the box shadow of the neutral-text-intent button on hover.
 * @prop --tct-btn-neutral-text-focus-background: (<color>) Controls the background color of the neutral-text-intent button on focus.
 * @prop --tct-btn-neutral-text-focus-border-color: (<color>) Controls the border color of the neutral-text-intent button on focus.
 * @prop --tct-btn-neutral-text-focus-font-color: (<color>) Controls the text color of the neutral-text-intent button on focus.
 * @prop --tct-btn-neutral-text-focus-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-text-intent button on focus.
 * @prop --tct-btn-neutral-text-focus-visible-background: (<color>) Controls the background color of the neutral-text-intent button when focused via keyboard.
 * @prop --tct-btn-neutral-text-focus-visible-border-color: (<color>) Controls the border color of the neutral-text-intent button when focused via keyboard.
 * @prop --tct-btn-neutral-text-focus-visible-font-color: (<color>) Controls the text color of the neutral-text-intent button when focused via keyboard.
 * @prop --tct-btn-neutral-text-focus-visible-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-text-intent button when focused via keyboard.
 * @prop --tct-btn-neutral-text-focus-visible-inner-ring-color: (<color>) Controls the inner ring color of the neutral-text-intent button when focused via keyboard.
 * @prop --tct-btn-neutral-text-focus-visible-outer-ring-color: (<color>) Controls the outer ring color of the neutral-text-intent button when focused via keyboard.
 * @prop --tct-btn-neutral-text-focus-visible-box-shadow: (*) Controls the box shadow of the neutral-text-intent button when focused via keyboard.
 * @prop --tct-btn-neutral-text-active-background: (<color>) Controls the background color of the neutral-text-intent button when active.
 * @prop --tct-btn-neutral-text-active-border-color: (<color>) Controls the border color of the neutral-text-intent button when active.
 * @prop --tct-btn-neutral-text-active-font-color: (<color>) Controls the text color of the neutral-text-intent button when active.
 * @prop --tct-btn-neutral-text-active-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-text-intent button when active.
 * @prop --tct-btn-neutral-text-disabled-background: (<color>) Controls the background color of the neutral-text-intent button when disabled.
 * @prop --tct-btn-neutral-text-disabled-border-color: (<color>) Controls the border color of the neutral-text-intent button when disabled.
 * @prop --tct-btn-neutral-text-disabled-font-color: (<color>) Controls the text color of the neutral-text-intent button when disabled.
 * @prop --tct-btn-neutral-text-disabled-text-decoration: (<custom-ident>) Controls the text-decoration of the neutral-text-intent button when disabled.
 * @prop --tct-btn-destroy-background: (<color>) Controls the background color of the destroy-intent button.
 * @prop --tct-btn-destroy-backdrop-filter?: (*) Controls the optional backdrop-filter of the destroy-intent button.
 * @prop --tct-btn-destroy-border-color: (<color>) Controls the border color of the destroy-intent button.
 * @prop --tct-btn-destroy-border-style: (<custom-ident>) Controls the border style of the destroy-intent button.
 * @prop --tct-btn-destroy-border-width: (<length>+) Controls the border width of the destroy-intent button.
 * @prop --tct-btn-destroy-font-color: (<color>) Controls the text color of the destroy-intent button.
 * @prop --tct-btn-destroy-font-weight: (<number>) Controls the font weight of the destroy-intent button.
 * @prop --tct-btn-destroy-text-decoration: (<custom-ident>) Controls the text-decoration of the destroy-intent button.
 * @prop --tct-btn-destroy-box-shadow: (*) Controls the box shadow of the destroy-intent button.
 * @prop --tct-btn-destroy-icon-color: (<color>) Controls the icon color of the destroy-intent button.
 * @prop --tct-btn-destroy-hover-background: (<color>) Controls the background color of the destroy-intent button on hover.
 * @prop --tct-btn-destroy-hover-border-color: (<color>) Controls the border color of the destroy-intent button on hover.
 * @prop --tct-btn-destroy-hover-font-color: (<color>) Controls the text color of the destroy-intent button on hover.
 * @prop --tct-btn-destroy-hover-text-decoration: (<custom-ident>) Controls the text-decoration of the destroy-intent button on hover.
 * @prop --tct-btn-destroy-hover-inner-ring-color: (<color>) Controls the inner ring color of the destroy-intent button on hover.
 * @prop --tct-btn-destroy-hover-outer-ring-color: (<color>) Controls the outer ring color of the destroy-intent button on hover.
 * @prop --tct-btn-destroy-hover-box-shadow: (*) Controls the box shadow of the destroy-intent button on hover.
 * @prop --tct-btn-destroy-focus-background: (<color>) Controls the background color of the destroy-intent button on focus.
 * @prop --tct-btn-destroy-focus-border-color: (<color>) Controls the border color of the destroy-intent button on focus.
 * @prop --tct-btn-destroy-focus-font-color: (<color>) Controls the text color of the destroy-intent button on focus.
 * @prop --tct-btn-destroy-focus-text-decoration: (<custom-ident>) Controls the text-decoration of the destroy-intent button on focus.
 * @prop --tct-btn-destroy-focus-box-shadow: (*) Controls the box shadow of the destroy-intent button on focus.
 * @prop --tct-btn-destroy-focus-visible-background: (<color>) Controls the background color of the destroy-intent button when focused via keyboard.
 * @prop --tct-btn-destroy-focus-visible-border-color: (<color>) Controls the border color of the destroy-intent button when focused via keyboard.
 * @prop --tct-btn-destroy-focus-visible-font-color: (<color>) Controls the text color of the destroy-intent button when focused via keyboard.
 * @prop --tct-btn-destroy-focus-visible-text-decoration: (<custom-ident>) Controls the text-decoration of the destroy-intent button when focused via keyboard.
 * @prop --tct-btn-destroy-focus-visible-inner-ring-color: (<color>) Controls the inner ring color of the destroy-intent button when focused via keyboard.
 * @prop --tct-btn-destroy-focus-visible-outer-ring-color: (<color>) Controls the outer ring color of the destroy-intent button when focused via keyboard.
 * @prop --tct-btn-destroy-focus-visible-box-shadow: (*) Controls the box shadow of the destroy-intent button when focused via keyboard.
 * @prop --tct-btn-destroy-active-background: (<color>) Controls the background color of the destroy-intent button when active.
 * @prop --tct-btn-destroy-active-border-color: (<color>) Controls the border color of the destroy-intent button when active.
 * @prop --tct-btn-destroy-active-font-color: (<color>) Controls the text color of the destroy-intent button when active.
 * @prop --tct-btn-destroy-active-text-decoration: (<custom-ident>) Controls the text-decoration of the destroy-intent button when active.
 * @prop --tct-btn-destroy-disabled-background: (<color>) Controls the background color of the destroy-intent button when disabled.
 * @prop --tct-btn-destroy-disabled-border-color: (<color>) Controls the border color of the destroy-intent button when disabled.
 * @prop --tct-btn-destroy-disabled-font-color: (<color>) Controls the text color of the destroy-intent button when disabled.
 * @prop --tct-btn-destroy-disabled-text-decoration: (<custom-ident>) Controls the text-decoration of the destroy-intent button when disabled.
 * @prop --tct-btn-escape-background: (<color>) Controls the background color of the escape-intent button.
 * @prop --tct-btn-escape-backdrop-filter?: (*) Controls the optional backdrop-filter of the escape-intent button.
 * @prop --tct-btn-escape-border-color: (<color>) Controls the border color of the escape-intent button.
 * @prop --tct-btn-escape-border-style: (<custom-ident>) Controls the border style of the escape-intent button.
 * @prop --tct-btn-escape-border-width: (<length>+) Controls the border width of the escape-intent button.
 * @prop --tct-btn-escape-font-color: (<color>) Controls the text color of the escape-intent button.
 * @prop --tct-btn-escape-font-weight: (<number>) Controls the font weight of the escape-intent button.
 * @prop --tct-btn-escape-text-decoration: (<custom-ident>) Controls the text-decoration of the escape-intent button.
 * @prop --tct-btn-escape-box-shadow: (*) Controls the box shadow of the escape-intent button.
 * @prop --tct-btn-escape-icon-color: (<color>) Controls the icon color of the escape-intent button.
 * @prop --tct-btn-escape-hover-background: (<color>) Controls the background color of the escape-intent button on hover.
 * @prop --tct-btn-escape-hover-border-color: (<color>) Controls the border color of the escape-intent button on hover.
 * @prop --tct-btn-escape-hover-font-color: (<color>) Controls the text color of the escape-intent button on hover.
 * @prop --tct-btn-escape-hover-text-decoration: (<custom-ident>) Controls the text-decoration of the escape-intent button on hover.
 * @prop --tct-btn-escape-hover-box-shadow: (*) Controls the box shadow of the escape-intent button on hover.
 * @prop --tct-btn-escape-hover-inner-ring-color: (<color>) Controls the inner ring color of the escape-intent button on hover.
 * @prop --tct-btn-escape-hover-outer-ring-color: (<color>) Controls the outer ring color of the escape-intent button on hover.
 * @prop --tct-btn-escape-focus-background: (<color>) Controls the background color of the escape-intent button on focus.
 * @prop --tct-btn-escape-focus-border-color: (<color>) Controls the border color of the escape-intent button on focus.
 * @prop --tct-btn-escape-focus-font-color: (<color>) Controls the text color of the escape-intent button on focus.
 * @prop --tct-btn-escape-focus-text-decoration: (<custom-ident>) Controls the text-decoration of the escape-intent button on focus.
 * @prop --tct-btn-escape-focus-box-shadow: (*) Controls the box shadow of the escape-intent button on focus.
 * @prop --tct-btn-escape-focus-visible-background: (<color>) Controls the background color of the escape-intent button when focused via keyboard.
 * @prop --tct-btn-escape-focus-visible-border-color: (<color>) Controls the border color of the escape-intent button when focused via keyboard.
 * @prop --tct-btn-escape-focus-visible-font-color: (<color>) Controls the text color of the escape-intent button when focused via keyboard.
 * @prop --tct-btn-escape-focus-visible-text-decoration: (<custom-ident>) Controls the text-decoration of the escape-intent button when focused via keyboard.
 * @prop --tct-btn-escape-focus-visible-inner-ring-color: (<color>) Controls the inner ring color of the escape-intent button when focused via keyboard.
 * @prop --tct-btn-escape-focus-visible-outer-ring-color: (<color>) Controls the outer ring color of the escape-intent button when focused via keyboard.
 * @prop --tct-btn-escape-focus-visible-box-shadow: (*) Controls the box shadow of the escape-intent button when focused via keyboard.
 * @prop --tct-btn-escape-active-background: (<color>) Controls the background color of the escape-intent button when active.
 * @prop --tct-btn-escape-active-border-color: (<color>) Controls the border color of the escape-intent button when active.
 * @prop --tct-btn-escape-active-font-color: (<color>) Controls the text color of the escape-intent button when active.
 * @prop --tct-btn-escape-active-text-decoration: (<custom-ident>) Controls the text-decoration of the escape-intent button when active.
 * @prop --tct-btn-escape-disabled-background: (<color>) Controls the background color of the escape-intent button when disabled.
 * @prop --tct-btn-escape-disabled-border-color: (<color>) Controls the border color of the escape-intent button when disabled.
 * @prop --tct-btn-escape-disabled-font-color: (<color>) Controls the text color of the escape-intent button when disabled.
 * @prop --tct-btn-escape-disabled-text-decoration: (<custom-ident>) Controls the text-decoration of the escape-intent button when disabled.
 */
q2-loading {
  --tct-loading-primary-color: currentcolor;
  --tct-loading-secondary-color: currentcolor;
  --tct-loading-spinner-size: 24px;
}

.slot-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--app-scale-1x, 5px);
  pointer-events: none;
}
:host([loading]) .icon-right .slot-container {
  flex-direction: row-reverse;
}

:host([loading]) ::slotted(q2-icon) {
  display: none;
}

:host([loading]:not([loading=false])) button {
  pointer-events: none;
}

:host([block]) button,
:host([block]) button.icon-only {
  display: block;
  width: 100%;
}

:host {
  display: inline-block;
}

:host([hidden]) {
  display: none;
}

:host([block]) {
  display: block;
  width: 100%;
}

::slotted(q2-icon) {
  pointer-events: none;
  margin-block: -100px;
}

button.icon-only ::slotted(q2-icon) {
  margin-block: 0;
}

:host {
  --comp-font-weight: 600;
  --comp-border-radius: var(--tct-btn-border-radius, var(--app-border-radius-1, 4px));
  --comp-btn-tween: var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));
  --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --comp-background-alternative: #ebf8ff;
  --comp-focus-ring-color: var(--t-focus-color, var(--const-focus-color));
}
:host .btn-height-wrapper {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--app-scale-1x, 5px);
}
:host .btn-height-wrapper:active {
  box-shadow: none;
}

button {
  margin: var(--tct-scale-0, var(--app-scale-0x, 0));
  padding: var(--tct-scale-0, var(--app-scale-0x, 0));
  display: inline-block;
  width: 100%;
  hyphens: auto;
  border: var(--tct-btn-border);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  font-weight: 400;
  color: inherit;
  cursor: pointer;
  transition: var(--comp-btn-tween);
  transition-property: background, color, box-shadow, fill, border-color, border-width, transform;
  outline: 0;
  min-height: var(--tct-btn-min-height, none);
  letter-spacing: var(--tct-btn-letter-spacing, inherit);
}
button:disabled {
  opacity: var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));
  cursor: not-allowed;
}
button.has-color, button.has-intent {
  font-size: var(--tct-btn-font-size, var(--t-btn-font-size, inherit));
  border-radius: var(--tct-btn-border-radius, var(--comp-border-radius));
  text-transform: var(--tct-btn-text-transform);
}
button.has-color:not(.has-size), button.has-intent:not(.has-size) {
  padding: var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));
}
button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
  --tct-icon-size: var(--tct-btn-icon-size, 18px);
}
:host([size="1"]) button {
  padding: var(--tct-scale-1, var(--app-scale-1x, 5px));
}
:host([size="2"]) button {
  padding: var(--tct-scale-2, var(--app-scale-2x, 10px));
}
:host([size="3"]) button {
  padding: var(--tct-scale-3, var(--app-scale-3x, 15px));
}
:host([size="4x"]) button {
  padding: var(--tct-scale-4x, var(--app-scale-4x, 20px));
}
:host([size="4"]) button {
  padding: var(--tct-scale-6x, var(--app-scale-6x, 30px));
}
:host([size=small]) button.has-intent:not(.intent-coin):not(.icon-only) {
  padding: var(--tct-btn-padding-size-small, var(--t-btn-padding-size-small, 6px 13px));
  font-size: var(--tct-btn-font-size-small, var(--t-btn-font-size-small, var(--const-px-14, 14px)));
  line-height: var(--tct-btn-line-height-small, var(--app-line-height, var(--const-px-14, 14px)));
  min-height: var(--tct-btn-min-height-small, 36px);
}
:host([size=small]) button.has-intent:not(.intent-coin):not(.icon-only) ::slotted(q2-icon) {
  --tct-icon-size: var(--tct-btn-icon-size-small, 14px);
}
:host(:is(:not([size]), [size=medium])) button.has-intent:not(.intent-coin):not(.icon-only) {
  padding: var(--tct-btn-padding-size-medium, var(--t-btn-padding-size-medium, 10px 13px));
  font-size: var(--tct-btn-font-size-medium, var(--t-btn-font-size-medium, var(--const-px-14, 14px)));
  line-height: var(--tct-btn-line-height-medium, var(--app-line-height, var(--const-px-14, 14px)));
  min-height: var(--tct-btn-min-height-medium, 44px);
}
:host(:is(:not([size]), [size=medium])) button.has-intent:not(.intent-coin):not(.icon-only) ::slotted(q2-icon) {
  --tct-icon-size: var(--tct-btn-icon-size-medium, 16px);
}
:host([size=large]) button.has-intent:not(.intent-coin):not(.icon-only) {
  padding: var(--tct-btn-padding-size-large, var(--t-btn-padding-size-large, 13px 18px));
  font-size: var(--tct-btn-font-size-large, var(--t-btn-font-size-large, var(--const-px-14, 14px)));
  line-height: var(--tct-btn-line-height-large, var(--app-line-height, var(--const-px-14, 14px)));
  min-height: var(--tct-btn-min-height-large, 50px);
}
:host([size=large]) button.has-intent:not(.intent-coin):not(.icon-only) ::slotted(q2-icon) {
  --tct-icon-size: var(--tct-btn-icon-size-large, 18px);
}
:host(:not([intent])) button:focus-visible {
  --comp-default-focus-visible-box-shadow: 0 0 0 2px #ffffff,
      0 0 0 4px var(--comp-focus-ring-color);
  box-shadow: var(--tct-btn-default-double-focus-visible-ring, var(--comp-default-focus-visible-box-shadow));
}
:host([color=primary]) button, :host([intent=workflow-primary]) button {
  --comp-btn-tween: var(--tct-btn-primary-tween, 100ms ease-out);
  backdrop-filter: var(--tct-btn-primary-backdrop-filter);
  transform-origin: center;
  --comp-background: var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)));
  --comp-hover-background: var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg, #5e408b));
  --comp-hover-border-color: #5e408b;
  --comp-font-color: var(--tct-btn-primary-font-color, var(--app-white, #ffffff));
  --comp-box-shadow: var(--tct-btn-primary-box-shadow, none);
  --comp-focus-box-shadow: var(--tct-btn-primary-focus-box-shadow, var(--comp-box-shadow));
  --comp-active-background: var(--tct-btn-primary-active-background, #523578);
  --comp-active-border-color: #523578;
  --comp-hover-outer-ring-color: var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));
  --comp-hover-inner-ring-color: var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));
  --comp-hover-box-shadow: var(
      --tct-btn-primary-hover-box-shadow,
      0 0 0 2px var(--comp-hover-inner-ring-color),
      0 0 0 4px var(--comp-hover-outer-ring-color)
  );
  --comp-active-box-shadow: var(--comp-box-shadow);
  --comp-disabled-box-shadow: var(--comp-box-shadow);
  --comp-focus-visible-outer-ring-color: var(--tct-btn-primary-focus-visible-outer-ring-color, var(--comp-focus-ring-color));
  --comp-focus-visible-inner-ring-color: var(--tct-btn-primary-focus-visible-inner-ring-color, #ffffff);
  --comp-focus-visible-box-shadow: var(
      --tct-btn-primary-focus-visible-box-shadow,
      0 0 0 2px var(--comp-focus-visible-inner-ring-color),
      0 0 0 4px var(--comp-focus-visible-outer-ring-color)
  );
  --comp-hover-box-shadow: var(--tct-btn-primary-hover-box-shadow, none);
  border-style: var(--tct-btn-primary-border-style, var(--comp-border-style));
  border-width: var(--tct-btn-primary-border-width, var(--comp-border-width));
  font-weight: var(--tct-btn-primary-font-weight, var(--comp-font-weight));
  border-color: var(--tct-btn-primary-border-color, var(--comp-border-color));
  background: var(--tct-btn-primary-background, var(--comp-background));
  color: var(--tct-btn-primary-font-color, var(--comp-font-color));
  text-decoration: var(--tct-btn-primary-text-decoration, var(--comp-text-decoration));
  box-shadow: var(--comp-box-shadow);
}
:host([color=primary]) button:enabled:hover, :host([intent=workflow-primary]) button:enabled:hover {
  border-color: var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
  background: var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));
  color: var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-hover-box-shadow);
}
:host([color=primary]) button:enabled:focus, :host([intent=workflow-primary]) button:enabled:focus {
  border-color: var(--tct-btn-primary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));
  background: var(--tct-btn-primary-focus-background, var(--comp-focus-background, var(--comp-background)));
  color: var(--tct-btn-primary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-primary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-focus-box-shadow);
}
:host([color=primary]) button:enabled:focus-visible, :host([intent=workflow-primary]) button:enabled:focus-visible {
  border-color: var(--tct-btn-primary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));
  background: var(--tct-btn-primary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));
  color: var(--tct-btn-primary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-primary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-focus-visible-box-shadow);
}
:host([color=primary]) button:enabled:active, :host([intent=workflow-primary]) button:enabled:active {
  border-color: var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
  background: var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));
  color: var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-active-box-shadow);
}
:host([color=primary]) button:focus-visible, :host([color=primary]) button:focus-visible:hover:enabled, :host([color=primary]) button:focus, :host([color=primary]) button:focus:hover:enabled, :host([intent=workflow-primary]) button:focus-visible, :host([intent=workflow-primary]) button:focus-visible:hover:enabled, :host([intent=workflow-primary]) button:focus, :host([intent=workflow-primary]) button:focus:hover:enabled {
  border-color: var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
  background: var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));
  color: var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-hover-box-shadow);
}
:host([color=primary]) button:focus-visible:active:enabled, :host([color=primary]) button:focus:active:enabled, :host([intent=workflow-primary]) button:focus-visible:active:enabled, :host([intent=workflow-primary]) button:focus:active:enabled {
  border-color: var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
  background: var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));
  color: var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-active-box-shadow);
}
:host([color=primary]) button:disabled, :host([intent=workflow-primary]) button:disabled {
  border-color: var(--tct-btn-primary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));
  background: var(--tct-btn-primary-disabled-background, var(--comp-disabled-background, var(--comp-background)));
  color: var(--tct-btn-primary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-primary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-disabled-box-shadow);
}
:host([color=primary]) button ::slotted(q2-icon), :host([intent=workflow-primary]) button ::slotted(q2-icon) {
  --t-text: var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-font-color, currentcolor)));
}
:host([color=primary]) button:enabled:focus-visible, :host([intent=workflow-primary]) button:enabled:focus-visible {
  border-color: var(--tct-btn-primary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));
  background: var(--tct-btn-primary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));
  color: var(--tct-btn-primary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-primary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-focus-visible-box-shadow);
}
:host([color=primary]) button:enabled:active, :host([intent=workflow-primary]) button:enabled:active {
  border-color: var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
  background: var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));
  color: var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-active-box-shadow);
  transform: scale(var(--tct-btn-primary-active-scale, 0.97)) var(--tct-btn-primary-compositor-transform, translateZ(0));
}
:host([color=secondary]) button, :host([intent=workflow-secondary]) button {
  backdrop-filter: var(--tct-btn-secondary-backdrop-filter);
  --comp-background: var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));
  --comp-hover-background: var(--tct-btn-secondary-hover-background, var(--tct-btn-secondary-hover-bg, var(--t-a11y-active-gray-color-AA, #404040)));
  --comp-hover-font-color: var(--app-white, #ffffff);
  --comp-box-shadow: var(--tct-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow));
  --comp-focus-box-shadow: var(--tct-btn-secondary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));
  --comp-hover-outer-ring-color: var(--tct-btn-secondary-hover-outer-ring-color, var(--comp-hover-background));
  --comp-hover-inner-ring-color: var(--tct-btn-secondary-hover-inner-ring-color, var(--app-white));
  --comp-hover-box-shadow: var(
      --tct-btn-secondary-hover-box-shadow,
      0 0 0 2px var(--comp-hover-inner-ring-color),
      0 0 0 4px var(--comp-hover-outer-ring-color)
  );
  --comp-hover-box-shadow: var(
      --tct-btn-secondary-hover-box-shadow,
      var(--tct-btn-secondary-box-shadow, none)
  );
  --comp-active-box-shadow: var(--comp-box-shadow);
  --comp-disabled-box-shadow: var(--comp-box-shadow);
  --comp-focus-visible-outer-ring-color: var(--tct-btn-secondary-focus-visible-outer-ring-color, var(--comp-focus-ring-color));
  --comp-focus-visible-inner-ring-color: var(--tct-btn-secondary-focus-visible-inner-ring-color, var(--app-white));
  --comp-focus-visible-box-shadow: var(
      --tct-btn-secondary-focus-visible-box-shadow,
      0 0 0 2px var(--comp-focus-visible-inner-ring-color),
      0 0 0 4px var(--comp-focus-visible-outer-ring-color)
  );
  border-style: var(--tct-btn-secondary-border-style, var(--comp-border-style));
  border-width: var(--tct-btn-secondary-border-width, var(--comp-border-width));
  font-weight: var(--tct-btn-secondary-font-weight, var(--comp-font-weight));
  border-color: var(--tct-btn-secondary-border-color, var(--comp-border-color));
  background: var(--tct-btn-secondary-background, var(--comp-background));
  color: var(--tct-btn-secondary-font-color, var(--comp-font-color));
  text-decoration: var(--tct-btn-secondary-text-decoration, var(--comp-text-decoration));
  box-shadow: var(--comp-box-shadow);
}
:host([color=secondary]) button:enabled:hover, :host([intent=workflow-secondary]) button:enabled:hover {
  border-color: var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
  background: var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));
  color: var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-hover-box-shadow);
}
:host([color=secondary]) button:enabled:focus, :host([intent=workflow-secondary]) button:enabled:focus {
  border-color: var(--tct-btn-secondary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));
  background: var(--tct-btn-secondary-focus-background, var(--comp-focus-background, var(--comp-background)));
  color: var(--tct-btn-secondary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-secondary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-focus-box-shadow);
}
:host([color=secondary]) button:enabled:focus-visible, :host([intent=workflow-secondary]) button:enabled:focus-visible {
  border-color: var(--tct-btn-secondary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));
  background: var(--tct-btn-secondary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));
  color: var(--tct-btn-secondary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-secondary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-focus-visible-box-shadow);
}
:host([color=secondary]) button:enabled:active, :host([intent=workflow-secondary]) button:enabled:active {
  border-color: var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
  background: var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));
  color: var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-active-box-shadow);
}
:host([color=secondary]) button:focus-visible, :host([color=secondary]) button:focus-visible:hover:enabled, :host([color=secondary]) button:focus, :host([color=secondary]) button:focus:hover:enabled, :host([intent=workflow-secondary]) button:focus-visible, :host([intent=workflow-secondary]) button:focus-visible:hover:enabled, :host([intent=workflow-secondary]) button:focus, :host([intent=workflow-secondary]) button:focus:hover:enabled {
  border-color: var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
  background: var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));
  color: var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-hover-box-shadow);
}
:host([color=secondary]) button:focus-visible:active:enabled, :host([color=secondary]) button:focus:active:enabled, :host([intent=workflow-secondary]) button:focus-visible:active:enabled, :host([intent=workflow-secondary]) button:focus:active:enabled {
  border-color: var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
  background: var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));
  color: var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-active-box-shadow);
}
:host([color=secondary]) button:disabled, :host([intent=workflow-secondary]) button:disabled {
  border-color: var(--tct-btn-secondary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));
  background: var(--tct-btn-secondary-disabled-background, var(--comp-disabled-background, var(--comp-background)));
  color: var(--tct-btn-secondary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-secondary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-disabled-box-shadow);
}
:host([color=secondary]) button ::slotted(q2-icon), :host([intent=workflow-secondary]) button ::slotted(q2-icon) {
  --t-text: var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-font-color, currentcolor)));
}
:host([intent=workflow-destroy]) button {
  backdrop-filter: var(--tct-btn-destroy-backdrop-filter);
  --comp-background: var(--tct-btn-destroy-background, var(--const-stoplight-alert, #d20a0a));
  --comp-font-color: var(--tct-btn-destroy-font-color, var(--app-white));
  --comp-box-shadow: var(--tct-btn-destroy-box-shadow, var(--comp-btn-fallback-box-shadow));
  --comp-focus-box-shadow: var(--tct-btn-destroy-focus-box-shadow, var(--comp-btn-fallback-box-shadow));
  --comp-hover-outer-ring-color: var(--tct-btn-destroy-hover-outer-ring-color, var(--comp-background));
  --comp-hover-inner-ring-color: var(--tct-btn-destroy-hover-inner-ring-color, var(--comp-font-color));
  --comp-hover-box-shadow: var(
      --tct-btn-destroy-hover-box-shadow,
      0 0 0 2px var(--comp-hover-inner-ring-color),
      0 0 0 4px var(--comp-hover-outer-ring-color)
  );
  --comp-hover-box-shadow: var(
      --tct-btn-destroy-hover-box-shadow,
      var(--tct-btn-destroy-box-shadow, none)
  );
  --comp-active-box-shadow: var(--comp-box-shadow);
  --comp-disabled-box-shadow: var(--comp-box-shadow);
  --comp-focus-visible-outer-ring-color: var(--tct-btn-destroy-focus-visible-outer-ring-color, var(--comp-focus-ring-color));
  --comp-focus-visible-inner-ring-color: var(--tct-btn-destroy-focus-visible-inner-ring-color, var(--comp-font-color));
  --comp-focus-visible-box-shadow: var(
      --tct-btn-destroy-focus-visible-box-shadow,
      0 0 0 2px var(--comp-focus-visible-inner-ring-color),
      0 0 0 4px var(--comp-focus-visible-outer-ring-color)
  );
  border-style: var(--tct-btn-destroy-border-style, var(--comp-border-style));
  border-width: var(--tct-btn-destroy-border-width, var(--comp-border-width));
  font-weight: var(--tct-btn-destroy-font-weight, var(--comp-font-weight));
  border-color: var(--tct-btn-destroy-border-color, var(--comp-border-color));
  background: var(--tct-btn-destroy-background, var(--comp-background));
  color: var(--tct-btn-destroy-font-color, var(--comp-font-color));
  text-decoration: var(--tct-btn-destroy-text-decoration, var(--comp-text-decoration));
  box-shadow: var(--comp-box-shadow);
}
:host([intent=workflow-destroy]) button:enabled:hover {
  border-color: var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
  background: var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));
  color: var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-hover-box-shadow);
}
:host([intent=workflow-destroy]) button:enabled:focus {
  border-color: var(--tct-btn-destroy-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));
  background: var(--tct-btn-destroy-focus-background, var(--comp-focus-background, var(--comp-background)));
  color: var(--tct-btn-destroy-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-destroy-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-focus-box-shadow);
}
:host([intent=workflow-destroy]) button:enabled:focus-visible {
  border-color: var(--tct-btn-destroy-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));
  background: var(--tct-btn-destroy-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));
  color: var(--tct-btn-destroy-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-destroy-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-focus-visible-box-shadow);
}
:host([intent=workflow-destroy]) button:enabled:active {
  border-color: var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
  background: var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));
  color: var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-active-box-shadow);
}
:host([intent=workflow-destroy]) button:focus-visible, :host([intent=workflow-destroy]) button:focus-visible:hover:enabled, :host([intent=workflow-destroy]) button:focus, :host([intent=workflow-destroy]) button:focus:hover:enabled {
  border-color: var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
  background: var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));
  color: var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-hover-box-shadow);
}
:host([intent=workflow-destroy]) button:focus-visible:active:enabled, :host([intent=workflow-destroy]) button:focus:active:enabled {
  border-color: var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
  background: var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));
  color: var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-active-box-shadow);
}
:host([intent=workflow-destroy]) button:disabled {
  border-color: var(--tct-btn-destroy-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));
  background: var(--tct-btn-destroy-disabled-background, var(--comp-disabled-background, var(--comp-background)));
  color: var(--tct-btn-destroy-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-destroy-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-disabled-box-shadow);
}
:host([intent=workflow-destroy]) button ::slotted(q2-icon) {
  --t-text: var(--tct-btn-destroy-icon-color, var(--t-btn-destroy-icon-color, var(--comp-font-color, currentcolor)));
}
:host([intent=workflow-escape]) button {
  backdrop-filter: var(--tct-btn-escape-backdrop-filter);
  --comp-background: var(--tct-btn-escape-background, var(--app-white, #ffffff));
  --comp-font-color: var(--tct-btn-escape-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));
  --comp-box-shadow: var(--tct-btn-escape-box-shadow, var(--comp-btn-fallback-box-shadow));
  --comp-focus-box-shadow: var(--tct-btn-escape-focus-box-shadow, var(--comp-btn-fallback-box-shadow));
  --comp-hover-background: var(--tct-btn-escape-hover-background, var(--comp-background-alternative));
  --comp-active-background: var(--tct-btn-escape-active-background, var(--comp-background-alternative));
  --comp-focus-background: var(--tct-btn-escape-focus-background, var(--comp-background-alternative));
  --comp-hover-outer-ring-color: var(--tct-btn-escape-hover-outer-ring-color, var(--comp-font-color));
  --comp-hover-inner-ring-color: var(--tct-btn-escape-hover-inner-ring-color, var(--comp-background));
  --comp-hover-box-shadow: var(
      --tct-btn-escape-hover-box-shadow,
      0 0 0 2px var(--comp-hover-inner-ring-color),
      0 0 0 4px var(--comp-hover-outer-ring-color)
  );
  --comp-hover-box-shadow: var(
      --tct-btn-escape-hover-box-shadow,
      var(--tct-btn-escape-box-shadow, none)
  );
  --comp-active-box-shadow: var(--comp-box-shadow);
  --comp-disabled-box-shadow: var(--comp-box-shadow);
  --comp-focus-visible-outer-ring-color: var(--tct-btn-escape-focus-visible-outer-ring-color, var(--comp-focus-ring-color));
  --comp-focus-visible-inner-ring-color: var(--tct-btn-escape-focus-visible-inner-ring-color, var(--comp-background));
  --comp-focus-visible-box-shadow: var(
      --tct-btn-escape-focus-visible-box-shadow,
      0 0 0 2px var(--comp-focus-visible-inner-ring-color),
      0 0 0 4px var(--comp-focus-visible-outer-ring-color)
  );
  border-style: var(--tct-btn-escape-border-style, var(--comp-border-style));
  border-width: var(--tct-btn-escape-border-width, var(--comp-border-width));
  font-weight: var(--tct-btn-escape-font-weight, var(--comp-font-weight));
  border-color: var(--tct-btn-escape-border-color, var(--comp-border-color));
  background: var(--tct-btn-escape-background, var(--comp-background));
  color: var(--tct-btn-escape-font-color, var(--comp-font-color));
  text-decoration: var(--tct-btn-escape-text-decoration, var(--comp-text-decoration));
  box-shadow: var(--comp-box-shadow);
}
:host([intent=workflow-escape]) button:enabled:hover {
  border-color: var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
  background: var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));
  color: var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-hover-box-shadow);
}
:host([intent=workflow-escape]) button:enabled:focus {
  border-color: var(--tct-btn-escape-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));
  background: var(--tct-btn-escape-focus-background, var(--comp-focus-background, var(--comp-background)));
  color: var(--tct-btn-escape-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-escape-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-focus-box-shadow);
}
:host([intent=workflow-escape]) button:enabled:focus-visible {
  border-color: var(--tct-btn-escape-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));
  background: var(--tct-btn-escape-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));
  color: var(--tct-btn-escape-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-escape-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-focus-visible-box-shadow);
}
:host([intent=workflow-escape]) button:enabled:active {
  border-color: var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
  background: var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));
  color: var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-active-box-shadow);
}
:host([intent=workflow-escape]) button:focus-visible, :host([intent=workflow-escape]) button:focus-visible:hover:enabled, :host([intent=workflow-escape]) button:focus, :host([intent=workflow-escape]) button:focus:hover:enabled {
  border-color: var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
  background: var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));
  color: var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-hover-box-shadow);
}
:host([intent=workflow-escape]) button:focus-visible:active:enabled, :host([intent=workflow-escape]) button:focus:active:enabled {
  border-color: var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
  background: var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));
  color: var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-active-box-shadow);
}
:host([intent=workflow-escape]) button:disabled {
  border-color: var(--tct-btn-escape-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));
  background: var(--tct-btn-escape-disabled-background, var(--comp-disabled-background, var(--comp-background)));
  color: var(--tct-btn-escape-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-escape-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-disabled-box-shadow);
}
:host([intent=workflow-escape]) button ::slotted(q2-icon) {
  --t-text: var(--tct-btn-escape-icon-color, var(--t-btn-escape-icon-color, var(--comp-font-color, currentcolor)));
}
:host([intent=neutral]) button {
  backdrop-filter: var(--tct-btn-neutral-backdrop-filter);
  --comp-background: var(--tct-btn-neutral-background, var(--app-white, #ffffff));
  --comp-font-color: var(--tct-btn-neutral-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));
  --comp-box-shadow: var(--tct-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow));
  --comp-focus-box-shadow: var(--tct-btn-neutral-focus-box-shadow, var(--comp-btn-fallback-box-shadow));
  --comp-border-width: 1px;
  --comp-border-style: solid;
  --comp-border-color: var(--comp-font-color);
  --comp-hover-outer-ring-color: var(--tct-btn-neutral-hover-outer-ring-color, var(--comp-font-color));
  --comp-hover-inner-ring-color: var(--tct-btn-neutral-hover-inner-ring-color, var(--app-white));
  --comp-hover-box-shadow: var(
      --tct-btn-neutral-hover-box-shadow,
      0 0 0 2px var(--comp-hover-inner-ring-color),
      0 0 0 4px var(--comp-hover-outer-ring-color)
  );
  --comp-hover-box-shadow: var(
      --tct-btn-neutral-hover-box-shadow,
      var(--tct-btn-neutral-box-shadow, none)
  );
  --comp-active-box-shadow: var(--comp-box-shadow);
  --comp-disabled-box-shadow: var(--comp-box-shadow);
  --comp-focus-visible-outer-ring-color: var(--tct-btn-neutral-focus-visible-outer-ring-color, var(--comp-focus-ring-color));
  --comp-focus-visible-inner-ring-color: var(--tct-btn-neutral-focus-visible-inner-ring-color, var(--comp-background));
  --comp-focus-visible-box-shadow: var(
      --tct-btn-neutral-focus-visible-box-shadow,
      0 0 0 2px var(--comp-focus-visible-inner-ring-color),
      0 0 0 4px var(--comp-focus-visible-outer-ring-color)
  );
  border-style: var(--tct-btn-neutral-border-style, var(--comp-border-style));
  border-width: var(--tct-btn-neutral-border-width, var(--comp-border-width));
  font-weight: var(--tct-btn-neutral-font-weight, var(--comp-font-weight));
  border-color: var(--tct-btn-neutral-border-color, var(--comp-border-color));
  background: var(--tct-btn-neutral-background, var(--comp-background));
  color: var(--tct-btn-neutral-font-color, var(--comp-font-color));
  text-decoration: var(--tct-btn-neutral-text-decoration, var(--comp-text-decoration));
  box-shadow: var(--comp-box-shadow);
}
:host([intent=neutral]) button:enabled:hover {
  border-color: var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
  background: var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));
  color: var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-hover-box-shadow);
}
:host([intent=neutral]) button:enabled:focus {
  border-color: var(--tct-btn-neutral-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));
  background: var(--tct-btn-neutral-focus-background, var(--comp-focus-background, var(--comp-background)));
  color: var(--tct-btn-neutral-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-neutral-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-focus-box-shadow);
}
:host([intent=neutral]) button:enabled:focus-visible {
  border-color: var(--tct-btn-neutral-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));
  background: var(--tct-btn-neutral-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));
  color: var(--tct-btn-neutral-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-neutral-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-focus-visible-box-shadow);
}
:host([intent=neutral]) button:enabled:active {
  border-color: var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
  background: var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));
  color: var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-active-box-shadow);
}
:host([intent=neutral]) button:focus-visible, :host([intent=neutral]) button:focus-visible:hover:enabled, :host([intent=neutral]) button:focus, :host([intent=neutral]) button:focus:hover:enabled {
  border-color: var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
  background: var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));
  color: var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-hover-box-shadow);
}
:host([intent=neutral]) button:focus-visible:active:enabled, :host([intent=neutral]) button:focus:active:enabled {
  border-color: var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
  background: var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));
  color: var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-active-box-shadow);
}
:host([intent=neutral]) button:disabled {
  border-color: var(--tct-btn-neutral-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));
  background: var(--tct-btn-neutral-disabled-background, var(--comp-disabled-background, var(--comp-background)));
  color: var(--tct-btn-neutral-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-neutral-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-disabled-box-shadow);
}
:host([intent=neutral]) button ::slotted(q2-icon) {
  --t-text: var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-font-color, currentcolor)));
}
:host([intent=neutral-text]) button {
  backdrop-filter: var(--tct-btn-neutral-text-backdrop-filter);
  --comp-background: var(--tct-btn-neutral-text-background, var(--tct-btn-neutral-text-bg, var(--app-white, #ffffff)));
  --comp-font-color: var(--tct-btn-neutral-text-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));
  --comp-box-shadow: var(--tct-btn-neutral-text-box-shadow);
  --comp-hover-text-decoration: underline;
  --comp-focus-background: var(--tct-btn-neutral-text-focus-background, var(--comp-background-alternative));
  --comp-hover-outer-ring-color: var(--tct-btn-neutral-text-hover-outer-ring-color, var(--comp-font-color));
  --comp-hover-inner-ring-color: var(--tct-btn-neutral-text-hover-inner-ring-color, var(--comp-background));
  --comp-hover-box-shadow: var(
      --tct-btn-neutral-text-hover-box-shadow,
      0 0 0 2px var(--comp-hover-inner-ring-color),
      0 0 0 4px var(--comp-hover-outer-ring-color)
  );
  --comp-hover-box-shadow: var(
      --tct-btn-neutral-text-hover-box-shadow,
      var(--tct-btn-neutral-text-box-shadow, none)
  );
  --comp-active-box-shadow: var(--comp-box-shadow);
  --comp-disabled-box-shadow: var(--comp-box-shadow);
  --comp-focus-visible-outer-ring-color: var(--tct-btn-neutral-text-focus-visible-outer-ring-color, var(--comp-focus-ring-color));
  --comp-focus-visible-inner-ring-color: var(--tct-btn-neutral-text-focus-visible-inner-ring-color, var(--app-white));
  --comp-focus-visible-box-shadow: var(
      --tct-btn-neutral-text-focus-visible-box-shadow,
      0 0 0 2px var(--comp-focus-visible-inner-ring-color),
      0 0 0 4px var(--comp-focus-visible-outer-ring-color)
  );
  border-style: var(--tct-btn-neutral-text-border-style, var(--comp-border-style));
  border-width: var(--tct-btn-neutral-text-border-width, var(--comp-border-width));
  font-weight: var(--tct-btn-neutral-text-font-weight, var(--comp-font-weight));
  border-color: var(--tct-btn-neutral-text-border-color, var(--comp-border-color));
  background: var(--tct-btn-neutral-text-background, var(--comp-background));
  color: var(--tct-btn-neutral-text-font-color, var(--comp-font-color));
  text-decoration: var(--tct-btn-neutral-text-text-decoration, var(--comp-text-decoration));
  box-shadow: var(--comp-box-shadow);
}
:host([intent=neutral-text]) button:enabled:hover {
  border-color: var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
  background: var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));
  color: var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-hover-box-shadow);
}
:host([intent=neutral-text]) button:enabled:focus {
  border-color: var(--tct-btn-neutral-text-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));
  background: var(--tct-btn-neutral-text-focus-background, var(--comp-focus-background, var(--comp-background)));
  color: var(--tct-btn-neutral-text-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-neutral-text-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-focus-box-shadow);
}
:host([intent=neutral-text]) button:enabled:focus-visible {
  border-color: var(--tct-btn-neutral-text-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));
  background: var(--tct-btn-neutral-text-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));
  color: var(--tct-btn-neutral-text-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-neutral-text-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-focus-visible-box-shadow);
}
:host([intent=neutral-text]) button:enabled:active {
  border-color: var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
  background: var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));
  color: var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-active-box-shadow);
}
:host([intent=neutral-text]) button:focus-visible, :host([intent=neutral-text]) button:focus-visible:hover:enabled, :host([intent=neutral-text]) button:focus, :host([intent=neutral-text]) button:focus:hover:enabled {
  border-color: var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));
  background: var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));
  color: var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-hover-box-shadow);
}
:host([intent=neutral-text]) button:focus-visible:active:enabled, :host([intent=neutral-text]) button:focus:active:enabled {
  border-color: var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
  background: var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));
  color: var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-active-box-shadow);
}
:host([intent=neutral-text]) button:disabled {
  border-color: var(--tct-btn-neutral-text-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));
  background: var(--tct-btn-neutral-text-disabled-background, var(--comp-disabled-background, var(--comp-background)));
  color: var(--tct-btn-neutral-text-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));
  text-decoration: var(--tct-btn-neutral-text-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));
  box-shadow: var(--comp-disabled-box-shadow);
}
:host([intent=neutral-text]) button ::slotted(q2-icon) {
  --t-text: var(--tct-btn-neutral-text-icon-color, var(--t-btn-neutral-text-icon-color, var(--comp-font-color, currentcolor)));
}
button.icon-only {
  width: var(--tct-btn-icon-width, var(--t-btn-icon-width, 44px));
  height: var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));
  min-height: var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));
  border-radius: var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, var(--tct-btn-border-radius, 0)));
  padding: var(--tct-btn-icon-padding, 0px);
}
button.icon-only ::slotted(q2-icon) {
  --tct-icon-size: unset;
}
button.icon-only.has-size {
  padding: var(--tct-btn-icon-padding, 0px);
}
button.icon-only.has-intent {
  padding: var(--tct-btn-icon-padding, 10px);
  border-radius: var(--tct-btn-icon-border-radius, var(--comp-border-radius));
}
button:not(.has-color):not(.has-intent):hover, button:not(.has-color):not(.has-intent):focus, button.icon-only:hover, button.icon-only:focus {
  background: var(--tct-btn-icon-hover-background, var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));
}
button:not(.has-intent).is-active.icon-only {
  background-color: var(--tct-btn-icon-active-background, var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));
}
button:not(.has-intent).icon-only:hover *, button:not(.has-intent).icon-only:focus *, button:not(.has-intent).is-active.icon-only * {
  color: var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))));
}
button:not(.has-intent):not(.icon-only) {
  height: var(--tct-btn-height, auto);
  padding-inline: var(--tct-btn-padding-inline, 0);
  font-weight: var(--tct-btn-font-weight);
  border-radius: var(--tct-btn-border-radius, 0);
}
button:not(.has-intent):not(.icon-only):hover, button:not(.has-intent):not(.icon-only):focus {
  background: var(--tct-btn-hover-background);
}
:host([badge]) button {
  padding: var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));
  font-size: var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct-btn-font-size, var(--t-btn-font-size, inherit))));
  border-radius: var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));
  background-color: var(--tct-btn-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent)));
  color: var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit));
}
:host([badge]) button ::slotted(q2-icon) {
  --tct-icon-size: 1em;
}
:host([badge]:hover) button:enabled {
  background-color: var(--tct-btn-badge-hover-background, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));
  color: var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));
}
:host(.selected[badge]) button, :host([active][badge]) button {
  background-color: var(--tct-btn-badge-active-background, var(--tct-btn-badge-active-bg, var(--t-btn-badge-active-bg, var(--comp-btn-primary-background))));
  color: var(--tct-btn-badge-active-font-color, var(--t-btn-badge-active-font-color, var(--comp-btn-primary-font-color)));
}
button.intent-coin {
  --tct-avatar-background: var(--tct-btn-coin-background, var(--t-primary-l5, #b4a0d3));
  --tct-avatar-height: var(--tct-btn-coin-height, 44px);
  --tct-avatar-width: var(--tct-btn-coin-width, 44px);
  --tct-avatar-fallback-background: var(--tct-btn-coin-background, var(--t-primary-l5, #b4a0d3));
  --tct-icon-stroke-primary: var(--tct-btn-coin-icon-stroke-primary, var(--t-text, #4d4d4d));
  --tct-icon-stroke-secondary: var(--tct-btn-coin-icon-stroke-secondary, var(--t-text, #4d4d4d));
  --tct-avatar-icon-stroke-primary: var(--tct-btn-coin-avatar-icon-stroke-primary, var(--t-text, #4d4d4d));
  --tct-avatar-icon-stroke-secondary: var(--tct-btn-coin-avatar-icon-stroke-secondary, var(--t-text, #4d4d4d));
  --tct-avatar-text-color: var(--tct-btn-coin-avatar-text-color, var(--t-text, #4d4d4d));
  --tct-icon-stroke-width: var(--tct-btn-coin-icon-stroke-width, 1px);
  --tct-btn-padding: 0;
  --tct-avatar-border: var(--tct-btn-coin-border, 0);
  --tct-avatar-fallback-border-radius: var(--tct-btn-coin-border-radius, 50%);
  --tct-btn-border-radius: var(--tct-btn-coin-border-radius, 50%);
  width: auto;
  backdrop-filter: var(--tct-btn-coin-backdrop-filter);
  box-shadow: var(--tct-btn-coin-box-shadow);
}
button.intent-coin:hover:not([disabled]), button.intent-coin:hover:focus:not(:active):not([disabled]) {
  --tct-avatar-background: var(--tct-btn-coin-hover-background, var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1)));
  --tct-avatar-fallback-background: var(--tct-btn-coin-hover-background, var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1)));
  --tct-icon-stroke-primary: var(--tct-btn-coin-icon-stroke-primary, var(--t-base, #ffffff));
  --tct-avatar-text-color: var(--tct-btn-coin-avatar-text-color, var(--t-base, #ffffff));
  box-shadow: var(--tct-btn-coin-hover-box-shadow, var(--tct-btn-coin-box-shadow, none));
}
button.intent-coin:focus:not([disabled]) {
  --const-double-focus-ring: 0;
  box-shadow: var(--tct-btn-coin-focus-box-shadow, var(--tct-btn-coin-box-shadow, 0));
}
button.intent-coin:focus-visible:not([disabled]) {
  --comp-coin-focus-visible-outer-ring-color: var(--tct-btn-coin-focus-visible-outer-ring-color, var(--comp-focus-ring-color));
  --comp-coin-focus-visible-box-shadow: 0 0 0 2px #ffffff,
      0 0 0 4px var(--comp-coin-focus-visible-outer-ring-color);
  box-shadow: var(--tct-btn-coin-focus-visible-box-shadow, var(--comp-coin-focus-visible-box-shadow));
}
button.intent-coin:focus:active:not([disabled]) {
  --tct-avatar-background: var(--tct-btn-coin-active-background);
  --tct-avatar-fallback-background: var(--tct-btn-coin-active-background);
  box-shadow: none;
}

@container style(--t-prefers-motion: "reduced") {
  :host([color=primary]) button:enabled:active,
  :host([intent=workflow-primary]) button:enabled:active {
    transform: none;
  }
}
@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
  @media (prefers-reduced-motion: reduce) {
    :host([color=primary]) button:enabled:active,
    :host([intent=workflow-primary]) button:enabled:active {
      transform: none;
    }
  }
}
.coin-label {
  color: var(--tct-btn-coin-label-color, var(--t-text, #4d4d4d));
  font-size: var(--tct-btn-coin-label-font-size, var(--app-font-size, var(--const-px-14, 14px)));
  max-width: 100px;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.coin-label.disabled {
  color: var(--tct-btn-coin-label-disabled-color, var(--t-textA, #767676));
  max-width: 100px;
}

.coin-wrapper {
  --tct-avatar-display: block;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--app-scale-1x, 5px);
  flex-direction: column;
  width: var(--tct-btn-coin-container-width, 95px);
}
.coin-wrapper ::slotted(:not(q2-avatar, [slot=coin-label])) {
  display: none;
}
.coin-wrapper .coin-label {
  color: var(--tct-btn-coin-label-color, var(--t-text, #4d4d4d));
  font-size: var(--tct-btn-coin-label-font-size, var(--app-font-size, var(--const-px-14, 14px)));
  margin-top: var(--tct-btn-coin-gap, var(--app-scale-2x, 10px));
  max-width: 100px;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coin-wrapper .coin-label.disabled {
  color: var(--tct-btn-coin-label-disabled-color, var(--t-textA, #767676));
  max-width: 100px;
}