wix-style-react/dist/src/Button/Button.st.css

wix-style-react

@st-import [
  --wds-button-border-radius-medium,
  --wds-button-border-radius-small,
  --wds-button-border-radius-tiny,
  --wds-button-gap-large,
  --wds-button-gap-medium,
  --wds-button-gap-small,
  --wds-button-gap-tiny,
  --wds-button-padding-vertical-large,
  --wds-button-padding-horizontal-large,
  --wds-button-padding-vertical-medium,
  --wds-button-padding-horizontal-medium,
  --wds-button-padding-vertical-small,
  --wds-button-padding-horizontal-small,
  --wds-button-padding-vertical-tiny,
  --wds-button-padding-horizontal-tiny,
  --wds-button-size-large,
  --wds-button-size-medium,
  --wds-button-size-small,
  --wds-button-size-tiny,
  --wds-color-border-standard-secondary,
  --wds-color-border-standard-secondary-disabled,
  --wds-color-border-light,
  --wds-color-border-light-disabled,
  --wds-color-border-premium-secondary,
  --wds-color-border-premium-secondary-disabled,
  --wds-color-border-destructive-secondary,
  --wds-color-border-destructive-secondary-disabled,
  --wds-color-border-dark-primary,
  --wds-color-border-dark-primary-disabled,
  --wds-color-border-dark-secondary-disabled,
  --wds-color-fill-standard-primary,
  --wds-color-fill-standard-primary-hover,
  --wds-color-fill-standard-primary-active,
  --wds-color-fill-standard-primary-disabled,
  --wds-color-fill-standard-tertiary,
  --wds-color-fill-standard-tertiary-disabled,
  --wds-color-fill-light-primary,
  --wds-color-fill-light-primary-hover,
  --wds-color-fill-light-primary-active,
  --wds-color-fill-light-primary-disabled,
  --wds-color-fill-light-secondary,
  --wds-color-fill-light-secondary-hover,
  --wds-color-fill-light-secondary-active,
  --wds-color-fill-light-secondary-disabled,
  --wds-color-fill-destructive-primary,
  --wds-color-fill-destructive-primary-hover,
  --wds-color-fill-destructive-primary-active,
  --wds-color-fill-destructive-primary-disabled,
  --wds-color-fill-destructive-tertiary,
  --wds-color-fill-destructive-tertiary-disabled,
  --wds-color-fill-premium-primary,
  --wds-color-fill-premium-primary-hover,
  --wds-color-fill-premium-primary-active,
  --wds-color-fill-premium-primary-disabled,
  --wds-color-fill-premium-light-primary,
  --wds-color-fill-premium-light-primary-hover,
  --wds-color-fill-premium-light-primary-active,
  --wds-color-fill-premium-light-primary-disabled,
  --wds-color-fill-premium-light-secondary,
  --wds-color-fill-premium-light-secondary-hover,
  --wds-color-fill-premium-light-secondary-active,
  --wds-color-fill-premium-light-secondary-disabled,
  --wds-color-fill-premium-tertiary,
  --wds-color-fill-premium-tertiary-disabled,
  --wds-color-fill-dark-primary,
  --wds-color-fill-dark-primary-hover,
  --wds-color-fill-dark-primary-active,
  --wds-color-fill-dark-primary-disabled,
  --wds-color-fill-transparent-primary,
  --wds-color-fill-transparent-primary-hover,
  --wds-color-fill-transparent-primary-active,
  --wds-color-fill-transparent-primary-disabled,
  --wds-color-fill-transparent-secondary,
  --wds-color-fill-transparent-secondary-hover,
  --wds-color-fill-transparent-secondary-active,
  --wds-color-fill-transparent-secondary-disabled,
  --wds-color-fill-ai-primary,
  --wds-color-fill-ai-primary-hover,
  --wds-color-fill-ai-primary-disabled,
  --wds-color-text-primary,
  --wds-color-text-premium,
  --wds-color-text-destructive,
  --wds-color-text-disabled,
  --wds-color-text-disabled-light,
  --wds-color-text-standard-primary,
  --wds-color-text-standard-primary-light,
  --wds-shadow-focus-standard,
]from '@wix/design-system-tokens/all.st.css';

:import {
  -st-from: './ButtonCore/ButtonCore.st.css';
  -st-default: ButtonCore;
}

:import {
  -st-from: '../Foundation/stylable/easing.st.css';
  -st-named: ease-9, speed-fast-1;
}

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: B00, B05, B10, F00, B20, R00, R05, R10, R20, R40, P00, P05, P10, P20, P40, P50, G10, G20, D80, B50,
    D40, D10, D20, B40, F00, D10-10, D10-20, D20-48, D20-54, D20-60, D20-72, D80-30, D80-50,
    D80-70, D10-30, Gradient-AI01, Gradient-AI02;
}

:import {
  -st-from: '../Foundation/stylable/typography.st.css';
  -st-named: text-tiny-normal, text-small-normal, text-medium-normal,
    text-tiny-bold;
}

.root {
  -st-extends: ButtonCore;
  -st-states: skin(string), size(string), priority(string), fluid, ellipsis,
    newColorsBranding;

  justify-content: center;

  box-sizing: border-box;
  text-align: center;
  outline: 1px solid;
  outline-offset: -1px;
  border: none;

  -st-mixin: text-medium-normal;

  transition-duration: value(speed-fast-1);
  transition-timing-function: value(ease-9);
  transition-property: background-color, color, border-color;

  height: var(--wds-button-size-medium, 36px);
  min-width: 84px;
  border-radius: var(--wds-button-border-radius-medium, 18px);
  padding: var(--wds-button-padding-vertical-medium, 6px) var(--wds-button-padding-horizontal-medium, 24px);

  background-color: var(--wds-color-fill-standard-primary, value(B10));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));

  /* render as anchor overrides */
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
}

.root::content {
  display: flex;
  align-items: center;
}

.root:hover {
  background-color: var(--wds-color-fill-standard-primary-hover, value(B20));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:active {
  background-color: var(--wds-color-fill-standard-primary-active, value(B10));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:disabled {
  background-color: var(--wds-color-fill-standard-primary-disabled, value(D10-30));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:focus-visible {
  box-shadow: var(--wds-shadow-focus-standard, 0 0 0 3px value(F00));
  z-index: 1000;
}

.root:newColorsBranding:hover {
  background-color: var(--wds-color-fill-standard-primary-hover, value(B05));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:newColorsBranding:active {
  background-color: var(--wds-color-fill-standard-primary-active, value(B00));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

/* Skin: standard - secondary */

.root:skin(standard):priority(secondary) {
  background-color: var(--wds-color-fill-standard-tertiary, transparent);
  outline-color: var(--wds-color-border-standard-secondary, value(B10));
  color: var(--wds-color-text-primary, value(B10));
}

.root:skin(standard):priority(secondary):hover {
  background-color: var(--wds-color-fill-standard-primary-hover, value(B20));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(standard):priority(secondary):active {
  background-color: var(--wds-color-fill-standard-primary-active, value(B10));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(standard):priority(secondary):disabled {
  background-color: var(--wds-color-fill-standard-tertiary-disabled, transparent);
  outline-color: var(--wds-color-border-standard-secondary-disabled, value(D10-30));
  color: var(--wds-color-text-disabled, value(D10-30));
}

/* Skin: inverted */

.root:skin(inverted) {
  background-color: var(--wds-color-fill-standard-tertiary, value(D80));
  outline-color: var(--wds-color-border-standard-secondary, value(D80));
  color: var(--wds-color-text-primary, value(B10))
}

.root:skin(inverted):hover {
  background-color: var(--wds-color-fill-standard-primary-hover, value(B20));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(inverted):active {
  background-color: var(--wds-color-fill-standard-primary-active, value(B10));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(inverted):disabled {
  background-color: var(--wds-color-fill-standard-tertiary-disabled, transparent);
  outline-color: var(--wds-color-border-standard-secondary-disabled, value(D10-30));
  color: var(--wds-color-text-disabled, value(D10-30));
}

.root:newColorsBranding:skin(standard):priority(secondary),
.root:newColorsBranding:skin(inverted) {
  background-color: var(--wds-color-fill-standard-tertiary, value(D80));
  outline-color: var(--wds-color-border-standard-secondary, value(B40));
  color: var(--wds-color-text-primary, value(B10))
}

.root:newColorsBranding:skin(standard):priority(secondary):hover,
.root:newColorsBranding:skin(inverted):hover {
  background-color: var(--wds-color-fill-standard-primary-hover, value(B05));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:newColorsBranding:skin(standard):priority(secondary):active,
.root:newColorsBranding:skin(inverted):active {
  background-color: var(--wds-color-fill-standard-primary-active, value(B00));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:newColorsBranding:skin(standard):priority(secondary):disabled,
.root:newColorsBranding:skin(inverted):disabled {
  background-color: var(--wds-color-fill-standard-tertiary-disabled, value(D80));
  outline-color: var(--wds-color-border-standard-secondary-disabled, value(D10-10));
  color: var(--wds-color-text-disabled, value(D10-30));
}

/* skin: light */

.root:skin(light) {
  background-color: var(--wds-color-fill-light-primary, value(D80));
  outline-color: transparent;
  color: var(--wds-color-text-primary, value(B10))
}

.root:skin(light):hover {
  background-color: var(--wds-color-fill-light-primary-hover, value(B50));
  outline-color: transparent;
  color: var(--wds-color-text-primary, value(B10));
}

.root:skin(light):active {
  background-color: var(--wds-color-fill-light-primary-active, value(B40));
  outline-color: transparent;
  color: var(--wds-color-text-primary, value(B10))
}

.root:skin(light):disabled {
  background-color: var(--wds-color-fill-light-primary-disabled, value(D80-30));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

/* skin: light - secondary */

.root:skin(light):priority(secondary) {
  background-color: var(--wds-color-fill-light-secondary, transparent);
  outline-color: var(--wds-color-border-light, value(D80));
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(light):priority(secondary):hover {
  background-color: var(--wds-color-fill-light-secondary-hover, value(B50));
  outline-color: transparent;
  color: var(--wds-color-text-primary, value(B10));
}

.root:skin(light):priority(secondary):active {
  background-color: var(--wds-color-fill-light-secondary-active, value(B40));
  outline-color: transparent;
  color: var(--wds-color-text-primary, value(B10))
}

.root:skin(light):priority(secondary):disabled {
  background-color: var(--wds-color-fill-light-secondary-disabled, transparent);
  outline-color: var(--wds-color-border-light-disabled, value(D80-70));
  color: var(--wds-color-text-disabled-light, value(D80-70));
}

.root:newColorsBranding:skin(light):priority(secondary) {
  background-color: var(--wds-color-fill-light-secondary, transparent);
  outline-color: var(--wds-color-border-light, value(D80-50));
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:newColorsBranding:skin(light):priority(secondary):disabled {
  background-color: var(--wds-color-fill-light-secondary-disabled, transparent);
  outline-color: var(--wds-color-border-light-disabled, value(D80-30));
  color: var(--wds-color-text-disabled-light, value(D80-70));
}

/* skin: destructive */

.root:skin(destructive) {
  background-color: var(--wds-color-fill-destructive-primary, value(R10));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(destructive):hover {
  background-color: var(--wds-color-fill-destructive-primary-hover, value(R20));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(destructive):active {
  background-color: var(--wds-color-fill-destructive-primary-active, value(R10));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(destructive):disabled {
  background-color: var(--wds-color-fill-destructive-primary-disabled, value(D10-30));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:newColorsBranding:skin(destructive):hover {
  background-color: var(--wds-color-fill-destructive-primary-hover, value(R05));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:newColorsBranding:skin(destructive):active {
  background-color: var(--wds-color-fill-destructive-primary-active, value(R00));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

/* skin: destructive - secondary */

.root:skin(destructive):priority(secondary) {
  background-color: var(--wds-color-fill-destructive-tertiary, transparent);
  outline-color: var(--wds-color-border-destructive-secondary, value(R10));
  color: var(--wds-color-text-destructive, value(R10));
}

.root:skin(destructive):priority(secondary):hover {
  background-color: var(--wds-color-fill-destructive-primary-hover, value(R20));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(destructive):priority(secondary):active {
  background-color: var(--wds-color-fill-destructive-primary-active, value(R10));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));

}

.root:skin(destructive):priority(secondary):disabled {
  background-color: var(--wds-color-fill-destructive-tertiary-disabled, transparent);
  outline-color: var(--wds-color-border-destructive-secondary-disabled, value(D10-30));
  color: var(--wds-color-text-disabled, value(D10-30));
}

.root:newColorsBranding:skin(destructive):priority(secondary) {
  background-color: var(--wds-color-fill-destructive-tertiary, value(D80));
  outline-color: var(--wds-color-border-destructive-secondary, value(R40));
  color: var(--wds-color-text-destructive, value(R10));
}

.root:newColorsBranding:skin(destructive):priority(secondary):hover {
  background-color: var(--wds-color-fill-destructive-primary-hover, value(R05));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:newColorsBranding:skin(destructive):priority(secondary):active {
  background-color: var(--wds-color-fill-destructive-primary-active, value(R00));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:newColorsBranding:skin(destructive):priority(secondary):disabled {
  background-color: var(--wds-color-fill-destructive-tertiary-disabled, value(D80));
  outline-color: var(--wds-color-border-destructive-secondary-disabled, value(D10-10));
  color: var(--wds-color-text-disabled, value(D10-30));
}

/* skin: premium */

.root:skin(premium) {
  background-color: var(--wds-color-fill-premium-primary, value(P10));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(premium):hover {
  background-color: var(--wds-color-fill-premium-primary-hover, value(P20));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(premium):active {
  background-color: var(--wds-color-fill-premium-primary-active, value(P10));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(premium):disabled {
  background-color: var(--wds-color-fill-premium-primary-disabled, value(D10-30));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:newColorsBranding:skin(premium):hover {
  background-color: var(--wds-color-fill-premium-primary-hover, value(P05));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:newColorsBranding:skin(premium):active {
  background-color: var(--wds-color-fill-premium-primary-active, value(P00));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}


/* skin: premium - secondary */

.root:skin(premium):priority(secondary) {
  background-color: var(--wds-color-fill-premium-tertiary, transparent);
  outline-color: var(--wds-color-border-premium-secondary, value(P10));
  color: var(--wds-color-text-premium, value(P10));
}

.root:skin(premium):priority(secondary):hover {
  background-color: var(--wds-color-fill-premium-primary-hover, value(P20));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(premium):priority(secondary):active {
  background-color: var(--wds-color-fill-premium-primary-active, value(P10));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(premium):priority(secondary):disabled {
  background-color: var(--wds-color-fill-premium-tertiary-disabled, transparent);
  outline-color: var(--wds-color-border-premium-secondary-disabled, value(D10-30));
  color: var(--wds-color-text-disabled, value(D10-30));
}

.root:newColorsBranding:skin(premium):priority(secondary) {
  background-color: var(--wds-color-fill-premium-tertiary, value(D80));
  outline-color: var(--wds-color-border-premium-secondary, value(P40));
  color: var(--wds-color-text-premium, value(P10));
}

.root:newColorsBranding:skin(premium):priority(secondary):hover {
  background-color: var(--wds-color-fill-premium-primary-hover, value(P05));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:newColorsBranding:skin(premium):priority(secondary):active {
  background-color: var(--wds-color-fill-premium-primary-active, value(P00));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:newColorsBranding:skin(premium):priority(secondary):disabled {
  background-color: var(--wds-color-fill-premium-tertiary-disabled, value(D80));
  outline-color: var(--wds-color-border-premium-secondary-disabled, value(D10-10));
  color: var(--wds-color-text-disabled, value(D10-30));
}

/* skin: premium-light - primary */

.root:skin(premium-light) {
  background-color: var(--wds-color-fill-premium-light-primary, value(P10));
  outline-color: transparent;
  color: var(--wds-color-text-premium, value(D80));
}

.root:skin(premium-light):hover {
  background-color: var(--wds-color-fill-premium-light-primary-hover, value(P20));
  outline-color: transparent;
  color: var(--wds-color-text-premium, value(D80));
}

.root:skin(premium-light):active {
  background-color: var(--wds-color-fill-premium-light-primary-active, value(P10));
  outline-color: transparent;
  color: var(--wds-color-text-premium, value(D80));
}

.root:skin(premium-light):disabled {
  background-color: var(--wds-color-fill-premium-light-primary-disabled, value(D80-30));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:newColorsBranding:skin(premium-light) {
  background-color: var(--wds-color-fill-premium-light-primary, value(D80));
  outline-color: transparent;
  color: var(--wds-color-text-premium, value(P10));
}

.root:newColorsBranding:skin(premium-light):hover {
  background-color: var(--wds-color-fill-premium-light-primary-hover, value(P50));
  outline-color: transparent;
  color: var(--wds-color-text-premium, value(P10));
}

.root:newColorsBranding:skin(premium-light):active {
  background-color: var(--wds-color-fill-premium-light-primary-active, value(P40));
  outline-color: transparent;
  color: var(--wds-color-text-premium, value(P10));
}

.root:newColorsBranding:skin(premium-light):disabled {
  background-color: var(--wds-color-fill-premium-light-primary-disabled, value(D80-30));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

/* skin: premium-light - secondary */

.root:skin(premium-light):priority(secondary) {
  background-color: var(--wds-color-fill-premium-light-secondary, transparent);
  outline-color: var(--wds-color-border-light, value(D80));
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(premium-light):priority(secondary):hover {
  background-color: var(--wds-color-fill-premium-light-secondary-hover, value(D80));
  outline-color: transparent;
  color: var(--wds-color-text-premium, value(P10));
}

.root:skin(premium-light):priority(secondary):active {
  background-color: var(--wds-color-fill-premium-light-secondary-active, value(D80));
  outline-color: transparent;
  color: var(--wds-color-text-premium, value(P10));
}

.root:skin(premium-light):priority(secondary):disabled {
  background-color: var(--wds-color-fill-premium-light-secondary-disabled, transparent);
  outline-color: var(--wds-color-border-light-disabled, value(D80-70));
  color: var(--wds-color-text-disabled-light, value(D80-70));
}

.root:newColorsBranding:skin(premium-light):priority(secondary) {
  background-color: var(--wds-color-fill-premium-light-secondary, transparent);
  outline-color: var(--wds-color-border-light, value(D80-50));
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:newColorsBranding:skin(premium-light):priority(secondary):hover {
  background-color: var(--wds-color-fill-premium-light-secondary-hover, value(P50));
  outline-color: transparent;
  color: var(--wds-color-text-premium, value(P10));
}

.root:newColorsBranding:skin(premium-light):priority(secondary):active {
  background-color: var(--wds-color-fill-premium-light-secondary-active, value(P40));
  outline-color: transparent;
  color: var(--wds-color-text-premium, value(P10));
}

.root:newColorsBranding:skin(premium-light):priority(secondary):disabled {
  background-color: var(--wds-color-fill-premium-light-secondary-disabled, transparent);
  outline-color: var(--wds-color-border-light-disabled, value(D80-30));
  color: var(--wds-color-text-disabled-light, value(D80-70));
}

/* skin: dark */

.root:skin(dark) {
  background-color: var(--wds-color-fill-dark-primary, value(D10));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(dark):hover {
  background-color: var(--wds-color-fill-dark-primary-hover, value(D20));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(dark):active {
  background-color: var(--wds-color-fill-dark-primary-active, value(D10));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(dark):disabled {
  background-color: var(--wds-color-fill-dark-primary-disabled, value(D10-30));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

/* skin: dark - secondary */

.root:skin(dark):priority(secondary) {
  background-color: transparent;
  outline-color: var(--wds-color-border-dark-primary, value(D40));
  color: var(--wds-color-text-standard-primary, value(D10))
}

.root:skin(dark):priority(secondary):hover {
  background-color: var(--wds-color-fill-dark-primary-hover, value(D20));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(dark):priority(secondary):active {
  background-color: var(--wds-color-fill-dark-primary-active, value(D10));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(dark):priority(secondary):disabled {
  background-color: transparent;
  outline-color: var(--wds-color-border-dark-primary-disabled, value(D10-10));
  color: var(--wds-color-text-disabled, value(D10-30));
}

/* skin: transparent */

.root:skin(transparent) {
  background-color: var(--wds-color-fill-transparent-primary, value(D20-48));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(transparent):hover {
  background-color: var(--wds-color-fill-transparent-primary-hover, value(D20-54));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(transparent):active {
  background-color: var(--wds-color-fill-transparent-primary-active, value(D20-60));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(transparent):disabled {
  background-color: var(--wds-color-fill-transparent-primary-disabled, value(D10-20));
  outline-color: transparent;
  color: var(--wds-color-text-disabled-light, value(D80-70));
}

.root:newColorsBranding:skin(transparent):hover {
  background-color: var(--wds-color-fill-transparent-primary-hover, value(D20-60));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:newColorsBranding:skin(transparent):active {
  background-color: var(--wds-color-fill-transparent-primary-active, value(D20-72));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

/* skin: transparent - secondary */

.root:skin(transparent):priority(secondary) {
  background-color: var(--wds-color-fill-transparent-secondary, transparent);
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(transparent):priority(secondary):hover {
  background-color: var(--wds-color-fill-transparent-secondary-hover, value(D20-54));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(transparent):priority(secondary):active {
  background-color: var(--wds-color-fill-transparent-secondary-active, value(D20-60));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(transparent):priority(secondary):disabled {
  background-color: var(--wds-color-fill-transparent-secondary-disabled, transparent);
  outline-color: var(--wds-color-border-dark-secondary-disabled, transparent);
  color: var(--wds-color-text-disabled, value(D80-70));
}

.root:newColorsBranding:skin(transparent):priority(secondary):disabled {
  background-color: var(--wds-color-fill-transparent-secondary-disabled, transparent);
  outline-color: var(--wds-color-border-dark-secondary-disabled, value(D10-10));
  color: var(--wds-color-text-disabled, value(D10-30));
}

/* skin: ai */
.root:skin(ai) {
  background: var(--wds-color-fill-ai-primary, value(Gradient-AI01));
  outline: none;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(ai):hover {
  background: var(--wds-color-fill-ai-primary-hover, value(Gradient-AI02));
}

.root:skin(ai):disabled {
  background: var(--wds-color-fill-ai-primary-disabled, value(D10-30));
  outline-color: transparent;
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

/* sizes */

.root:size(large) {
  height: var(--wds-button-size-large, 42px);
  min-width: 102px;

  -st-mixin: text-medium-normal;

  border-radius: var(--wds-button-border-radius-medium, 21px);
  padding: var(--wds-button-padding-vertical-large, 9px) var(--wds-button-padding-horizontal-large, 30px);
}

.root:size(small) {
  height: var(--wds-button-size-small, 30px);
  min-width: 72px;

  -st-mixin: text-small-normal;

  border-radius: var(--wds-button-border-radius-small, 15px);
  padding: var(--wds-button-padding-vertical-small, 6px) var(--wds-button-padding-horizontal-small, 18px);
}

.root:size(tiny) {
  height: var(--wds-button-size-tiny, 24px);
  min-width: 60px;

  -st-mixin: text-tiny-bold;

  line-height: 16px;
  border-radius: var(--wds-button-border-radius-tiny, 18px);
  padding: var(--wds-button-padding-vertical-tiny, 3px) var(--wds-button-padding-horizontal-tiny, 12px);
}

/* Full width mode */

.root:fluid {
  width: 100%;
}

/* Ellipsis */

.root:ellipsis {
  max-width: 100%;
}

/* Suffix and prefix */

.root:size(tiny)::suffix {
  margin: 0 -6px 0 var(--wds-button-gap-tiny, 3px);
  width: 18px;
  height: 18px;
}

.root:size(tiny)::prefix {
  margin: 0 var(--wds-button-gap-tiny, 3px) 0 -6px;
  width: 18px;
  height: 18px;
}

.root:size(small)::suffix {
  margin: 0 -6px 0 var(--wds-button-gap-small, 6px);
  width: 18px;
  height: 18px;
}

.root:size(small)::prefix {
  margin: 0 var(--wds-button-gap-small, 6px) 0 -6px;
  width: 18px;
  height: 18px;
}

.root::suffix {
  margin: 0 -12px 0 var(--wds-button-gap-medium, 6px);
  width: 24px;
  height: 24px;
}

.root::prefix {
  margin: 0 var(--wds-button-gap-medium, 6px) 0 -12px;
  width: 24px;
  height: 24px;
}

.root:size(large)::suffix {
  margin: 0 -12px 0 var(--wds-button-gap-large, 12px);
  width: 24px;
  height: 24px;
}

.root:size(large)::prefix {
  margin: 0 var(--wds-button-gap-large, 12px) 0 -12px;
  width: 24px;
  height: 24px;
}

/* rtl */

:global([dir='rtl']) .root:size(large)::suffix {
  margin: 0 var(--wds-button-gap-large, 12px) 0 -12px;
}

:global([dir='rtl']) .root:size(large)::prefix {
  margin: 0 -12px 0 var(--wds-button-gap-large, 12px);
}

:global([dir='rtl']) .root:size(small)::suffix {
  margin: 0 var(--wds-button-gap-small, 6px) 0 -6px;
}

:global([dir='rtl']) .root:size(small)::prefix {
  margin: 0 -6px 0 var(--wds-button-gap-small, 6px);
}

:global([dir='rtl']) .root::suffix {
  margin: 0 var(--wds-button-gap-medium, 12px) 0 -12px;
}

:global([dir='rtl']) .root::prefix {
  margin: 0 -12px 0 var(--wds-button-gap-medium, 12px);
}

:global([dir='rtl']) .root:size(tiny)::suffix {
  margin: 0 var(--wds-button-gap-tiny, 0px) 0 -6px;
}

:global([dir='rtl']) .root:size(tiny)::prefix {
  margin: 0 -6px 0 var(--wds-button-gap-tiny, 0px);
}

/* st-namespace-reference="../../../src/Button/Button.st.css" */