@st-namespace 'Button-st-css';
@st-import [
  --wix-color-38,
  --wix-color-41,
  --wix-color-44,
  --wix-color-39,
  --wix-color-42,
  --wix-color-45,
  --wix-color-40,
  --wix-color-43,
  --wix-color-46,
  --wix-color-47,
  --wix-color-50,
  --wix-color-53,
  --wix-color-48,
  --wix-color-51,
  --wix-color-54,
  --wix-color-49,
  --wix-color-52,
  --wix-color-55,
  --wix-color-5,
  --wix-color-1,
  --wix-color-29
] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import ButtonNext from '../internal/WixUiCoreComponents/components/CoreButtonNext/CoreButtonNext.st.css';
@st-import [ createButtonBorders, createButtonCorners, createButtonFont, createColor, createColorRaw, createFont ] from '../../common/formatters.st';
@st-import [ 
  --wst-button-primary-background-color-rgb,
  --wst-button-primary-border-bottom-color-rgb,
  --wst-button-primary-box-shadow,
  --wst-button-primary-color-rgb,
  --wst-button-primary-letter-spacing,
  --wst-button-primary-text-highlight,
  --wst-button-primary-text-outline,
  --wst-button-primary-text-shadow,
  --wst-button-primary-text-transform,
  --wst-primary-background-color-rgb,
  --wst-button-secondary-background-color-rgb,
  --wst-button-secondary-border-bottom-color-rgb,
  --wst-button-secondary-box-shadow,
  --wst-button-secondary-color-rgb,
  --wst-button-secondary-letter-spacing,
  --wst-button-secondary-text-highlight,
  --wst-button-secondary-text-outline,
  --wst-button-secondary-text-shadow,
  --wst-button-secondary-text-transform,
  --wst-paragraph-2-color-rgb,
  --wst-secondary-background-color-rgb,
  --wst-system-disabled-color-rgb,
 ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';

/*
 * The Button Text color
 * @type color
 */
@property st-global(--wix-ui-tpa-button-main-text-color);

/*
 * The Button Background color
 * @type color
 */
@property st-global(--wix-ui-tpa-button-main-background-color);

/*
 * The Button Background color on hover
 * @type color
 */
@property st-global(--wix-ui-tpa-button-hover-background-color);

/*
 * The font of the button's text
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '14px', lineHeight: '1.43em'}
 */
@property st-global(--wix-ui-tpa-button-main-text-font);

/*
 * The font of the button's text on hover state
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '14px', lineHeight: '1.43em'}
 */
@property st-global(--wix-ui-tpa-button-hover-text-font);

/*
 * The border of the button
 * @type color
 */
@property st-global(--wix-ui-tpa-button-main-border-color);

/*
 * The border of the button on hover
 * @type color
 */
@property st-global(--wix-ui-tpa-button-hover-border-color);

/*
 * The button's border width
 * @type size
 * @default Basic and Primary: 0px, basicSecondary and secondary: 1px
 */
@property st-global(--wix-ui-tpa-button-main-border-width);

/*
 * The button border radius
 * @type size
 * @default 0
 */
@property st-global(--wix-ui-tpa-button-main-border-radius);

/*
 * The text hover color
 * @type color
 */
@property st-global(--wix-ui-tpa-button-hover-text-color);

/*
 * Background color of the disabled button
 * @type color
 * @default Basic: --wix-color-29, Primary: --wix-color-44, basicSecondary and secondary: transparent
 */
@property st-global(--wix-ui-tpa-button-disabled-background-color);

/*
 * Padding inline start (when paddingMode="explicitPadding")
 * @type size
 * @default Default is 15px for all sizes
 */
@property st-global(--wix-ui-tpa-button-padding-inline-start);

/*
 * Padding inline end (when paddingMode="explicitPadding")
 * @type size
 * @default Default is 15px for all sizes
 */
@property st-global(--wix-ui-tpa-button-padding-inline-end);

/*
 * Padding block start (when paddingMode="explicitPadding")
 * @type size
 * @default Default depends on chosen size: tiny/small-5px; medium-7px; large-11px
 */
@property st-global(--wix-ui-tpa-button-padding-block-start);

/*
 * Padding block end (when paddingMode="explicitPadding")
 * @type size
 * @default Default depends on chosen size: tiny/small-5px; medium-7px; large-11px
 */
@property st-global(--wix-ui-tpa-button-padding-block-end);

/*
 * Text color of the disabled button
 * @type color
 */
@property st-global(--wix-ui-tpa-button-disabled-text-color);

/*
 * Border color of the disabled button
 * @type color
 */
@property st-global(--wix-ui-tpa-button-disabled-border-color);

/*
 * Button minimum width
 * @type size
 * @default Default is 100px
 */
@property st-global(--wix-ui-tpa-button-min-width);

/*
 * The space between the button's text and the icon
 * @type size
 * @default 4px
 */
@property st-global(--wix-ui-tpa-button-column-gap);

/*
 * The text decoration of the button's text on hover state
 * @type text-decoration
 */
@property st-global(--wix-ui-tpa-button-hover-text-font-text-decoration);

/*
 * The start-start border-radius of the button
 * @type size
 */
@property st-global(--wix-ui-tpa-button-main-border-start-start-radius);

/*
 * The start-end border-radius of the button
 * @type size
 */
@property st-global(--wix-ui-tpa-button-main-border-start-end-radius);

/*
 * The end-start border-radius of the button
 * @type size
 */
@property st-global(--wix-ui-tpa-button-main-border-end-start-radius);

/*
 * The end-end border-radius of the button
 * @type size
 */
@property st-global(--wix-ui-tpa-button-main-border-end-end-radius);

/*
 * The text-shadow of the button
 * @type text-shadow
 */
@property st-global(--wix-ui-tpa-button-main-text-shadow);

/*
 * The text-shadow of the button
 * @type text-shadow
 */
@property st-global(--wix-ui-tpa-button-main-text-outline);

/*
 * The box-shadow of the button
 * @type size
 */
@property st-global(--wix-ui-tpa-button-main-box-shadow);

/*
 * The letter-spacing of a text inside the button
 * @type size
 */
@property st-global(--wix-ui-tpa-button-main-text-font-letter-spacing);

/*
 * The text-transform of a text inside the button
 * @type text-transform
 */
@property st-global(--wix-ui-tpa-button-main-text-font-text-transform);

/*
 * The inline-start border width of the button
 * @type size
 */
@property st-global(--wix-ui-tpa-button-main-border-inline-start-width);

/*
 * The inline-start border style of the button
 * @type border
 */
@property st-global(--wix-ui-tpa-button-main-border-inline-start-style);

/*
 * The inline-start border color of the button
 * @type color
 */
@property st-global(--wix-ui-tpa-button-main-border-inline-start-color);

/*
 * The inline-end border width of the button
 * @type size
 */
@property st-global(--wix-ui-tpa-button-main-border-inline-end-width);

/*
 * The inline-end border style of the button
 * @type border
 */
@property st-global(--wix-ui-tpa-button-main-border-inline-end-style);

/*
 * The inline-end border color of the button
 * @type color
 */
@property st-global(--wix-ui-tpa-button-main-border-inline-end-color);

/*
 * The block-start border width of the button
 * @type size
 */
@property st-global(--wix-ui-tpa-button-main-border-block-start-width);

/*
 * The block-start border style of the button
 * @type border
 */
@property st-global(--wix-ui-tpa-button-main-border-block-start-style);

/*
 * The block-start border color of the button
 * @type color
 */
@property st-global(--wix-ui-tpa-button-main-border-block-start-color);

/*
 * The block-end border width of the button
 * @type size
 */
@property st-global(--wix-ui-tpa-button-main-border-block-end-width);

/*
 * The block-end border style of the button
 * @type border
 */
@property st-global(--wix-ui-tpa-button-main-border-block-end-style);

/*
 * The block-end border color of the button
 * @type color
 */
@property st-global(--wix-ui-tpa-button-main-border-block-end-color);

.root {
  --primaryBorderColor: var(--wix-ui-tpa-button-main-border-color, var(--wst-button-primary-border-bottom-color-rgb, var(--wst-button-primary-background-color-rgb, var(--wix-color-38))));
  --primaryHoverBorderColor: var(--wix-ui-tpa-button-hover-border-color, var(--primaryBorderColor));
  --primaryHoverLegacyBorderColor: var(--primaryHoverBorderColor), 0.7;
  --primaryDisabledBorderColor: var(--wix-ui-tpa-button-disabled-border-color, var(--wix-ui-tpa-button-main-border-color, var(--wst-system-disabled-color-rgb, var(--wix-color-45))));

  --secondaryBorderColor: var(--wix-ui-tpa-button-main-border-color, var(--wst-button-secondary-border-bottom-color-rgb, var(--wix-color-48)));
  --secondaryHoverBorderColor: var(--wix-ui-tpa-button-hover-border-color, var(--secondaryBorderColor));
  --secondaryHoverLegacyBorderColor: var(--secondaryHoverBorderColor), 0.7;
  --secondaryDisabledBorderColor: var(--wix-ui-tpa-button-disabled-border-color, var(--wst-system-disabled-color-rgb, var(--wix-color-54)));

  --basicBorderColor: var(--wix-ui-tpa-button-main-border-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  --basicHoverBorderColor: var(--wix-ui-tpa-button-hover-border-color, var(--basicBorderColor));
  --basicHoverLegacyBorderColor: var(--basicHoverBorderColor);
  --basicDisabledBorderColor: var(--wix-ui-tpa-button-disabled-border-color, var(--wix-ui-tpa-button-main-border-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29))));

  --basicSecondaryBorderColor: var(--basicBorderColor);
  --basicSecondaryHoverBorderColor: var(--basicHoverBorderColor);
  --basicSecondaryHoverLegacyBorderColor: var(--basicSecondaryHoverBorderColor), 0.7;
  --basicSecondaryDisabledBorderColor: var(--wix-ui-tpa-button-disabled-border-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29)));

  --basicBorderWidth: 0px;
  --basicBorderExPaddingWidth: 1px;
  --basicSecondaryBorderWidth: 1px;
  --primaryBorderWidth: 0px;
  --primaryBorderExPaddingWidth: 1px;
  --secondaryBorderWidth: 1px;

  --borderStyle: solid;

  -st-extends: ButtonNext;
  -st-states:
    priority(enum(primary, secondary, basic, basicSecondary)),
    size(enum(tiny, small, medium, large)),
    fullWidth,
    mobile,
    paddingMode(enum(dynamicPaddings, explicitPaddings)),
    wrapContent,
    hoverStyle(enum(colorChange, underline));

  min-width: var(--wix-ui-tpa-button-min-width, 100px);
  border-style: solid;
  box-sizing: content-box;
  border-color: createColor(--wix-ui-tpa-button-main-border-color, var(--wix-color-39));
  border-radius: var(--wix-ui-tpa-button-main-border-radius, 0);
  transition: background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out, border-width .2s ease-in-out;
  box-shadow: var(--wix-ui-tpa-button-main-box-shadow, 0 0);
  text-shadow: var(--wix-ui-tpa-button-main-text-shadow, 0 0 transparent), var(--wix-ui-tpa-button-main-text-outline, 0 0 transparent);
  letter-spacing: var(--wix-ui-tpa-button-main-text-font-letter-spacing);
  text-transform: var(--wix-ui-tpa-button-main-text-font-text-transform);

  -st-mixin: createFont(--wix-ui-tpa-button-main-text-font, 'Body-M', '{"size": "var(--wix-ui-tpa-button-font-size-default)", "line-height": "var(--wix-ui-tpa-button-line-height-default)"}');
}

.root:active:hoverStyle(underline),
.root:hover:hoverStyle(underline) {
  -st-mixin: createFont((--wix-ui-tpa-button-hover-text-font, --wix-ui-tpa-button-main-text-font), 'Body-M', '{"size": "var(--wix-ui-tpa-button-font-size-default)", "line-height": "var(--wix-ui-tpa-button-line-height-default)"}');
  text-decoration: var(--wix-ui-tpa-button-hover-text-font-text-decoration, underline) !important;
}

.root::content {
  margin: 0 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.root:fullWidth {
  width: 100%;
  box-sizing: border-box;
}

/* ---------- Priorities ---------- */

/*Basic*/
.root,
.root:priority(basic) {
  -st-mixin: createButtonFont(basic, main, 'Body-M'),
    createButtonCorners(basic),
    createButtonBorders(basic, main, --basicBorderWidth, --borderStyle, --basicBorderColor);

  color: createColor(--wix-ui-tpa-button-main-text-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
  background-color: createColor(--wix-ui-tpa-button-main-background-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
}

.root:active:hoverStyle(underline),
.root:priority(basic):active:hoverStyle(underline),
.root:hover:hoverStyle(underline),
.root:priority(basic):hover:hoverStyle(underline) {
  -st-mixin: createButtonFont(basic, hover, 'Body-M'),
    createButtonBorders(basic, hover, --basicBorderWidth, --borderStyle, --basicHoverBorderColor);

  color: createColor((--wix-ui-tpa-button-hover-text-color, --wix-ui-tpa-button-main-text-color), var(--wst-primary-background-color-rgb, var(--wix-color-1)));
  background-color: createColor((--wix-ui-tpa-button-hover-background-color, --wix-ui-tpa-button-main-background-color), var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
}

.root:active:not(:hoverStyle(underline)),
.root:priority(basic):active:not(:hoverStyle(underline)),
.root:hover:not(:hoverStyle(underline)),
.root:priority(basic):hover:not(:hoverStyle(underline)) {
  -st-mixin: createButtonFont(basic, hover, 'Body-M'),
    createButtonBorders(basic, hover, --basicBorderWidth, --borderStyle, --basicHoverLegacyBorderColor);

  color: createColor(--wix-ui-tpa-button-hover-text-color, createColorRaw(--wix-ui-tpa-button-main-text-color, var(--wst-primary-background-color-rgb, var(--wix-color-1), 0.7)));
  background-color: createColor(--wix-ui-tpa-button-hover-background-color, createColorRaw(--wix-ui-tpa-button-main-background-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5), 0.7)));
}

/*BasicSecondary*/
.root:priority(basicSecondary) {
  -st-mixin: createButtonFont(basicSecondary, main, 'Body-M'),
    createButtonCorners(basicSecondary),
    createButtonBorders(basicSecondary, main, --basicSecondaryBorderWidth, --borderStyle, --basicSecondaryBorderColor);

  color: createColor(--wix-ui-tpa-button-main-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  background-color: createColor(--wix-ui-tpa-button-main-background-color, (var(--wst-primary-background-color-rgb, var(--wix-color-1)), 0));
}

.root:priority(basicSecondary):active:hoverStyle(underline),
.root:priority(basicSecondary):hover:hoverStyle(underline) {
  -st-mixin: createButtonFont(basicSecondary, hover, 'Body-M'),
    createButtonBorders(basicSecondary, hover, --basicSecondaryBorderWidth, --borderStyle, --basicSecondaryHoverBorderColor);

  color: createColor((--wix-ui-tpa-button-hover-text-color, --wix-ui-tpa-button-main-text-color), var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  background-color: createColor((--wix-ui-tpa-button-hover-background-color, --wix-ui-tpa-button-main-background-color), var(--wst-primary-background-color-rgb, var(--wix-color-1)));
}

.root:priority(basicSecondary):active:not(:hoverStyle(underline)),
.root:priority(basicSecondary):hover:not(:hoverStyle(underline)) {
  -st-mixin: createButtonFont(basicSecondary, hover, 'Body-M'),
    createButtonBorders(basicSecondary, hover, --basicSecondaryBorderWidth, --borderStyle, --basicSecondaryHoverLegacyBorderColor);

  color: createColor(--wix-ui-tpa-button-hover-text-color, createColorRaw(--wix-ui-tpa-button-main-text-color, var(--wix-color-5), 0.7));
  background-color: createColor(--wix-ui-tpa-button-hover-background-color, (var(--wix-color-1), 0));
}

/*Primary*/
.root:priority(primary) {
  -st-mixin: createButtonCorners(primary),
    createButtonFont(primary, main, 'Body-M'),
    createButtonBorders(primary, main, --primaryBorderWidth, --borderStyle, --primaryBorderColor);

  color: createColor(--wix-ui-tpa-button-main-text-color, var(--wst-button-primary-color-rgb, var(--wix-color-40)));
  background-color: createColor(--wix-ui-tpa-button-main-background-color, var(--wst-button-primary-background-color-rgb, var(--wix-color-38)));
  letter-spacing: var(--wix-ui-tpa-button-main-text-font-letter-spacing, var(--wst-button-primary-letter-spacing));
  text-transform: var(--wix-ui-tpa-button-main-text-font-text-transform, var(--wst-button-primary-text-transform));
  box-shadow: var(--wix-ui-tpa-button-main-box-shadow, var(--wst-button-primary-box-shadow, 0 0));
  text-shadow: var(--wix-ui-tpa-button-main-text-shadow, var(--wst-button-primary-text-shadow, 0 0 transparent)), var(--wix-ui-tpa-button-main-text-outline, var(--wst-button-primary-text-outline, 0 0 transparent));
}

.root:priority(primary):active:hoverStyle(underline),
.root:priority(primary):hover:hoverStyle(underline) {
  -st-mixin:
    createButtonFont(primary, hover, 'Body-M'),
    createButtonBorders(primary, hover, --primaryBorderWidth, --borderStyle, --primaryHoverBorderColor);

  color: createColor((--wix-ui-tpa-button-hover-text-color, --wix-ui-tpa-button-main-text-color), var(--wst-button-primary-color-rgb, var(--wix-color-40)));
  background-color: createColor((--wix-ui-tpa-button-hover-background-color, --wix-ui-tpa-button-main-background-color), var(--wst-button-primary-background-color-rgb, var(--wix-color-38)));
}

.root:priority(primary):active:not(:hoverStyle(underline)),
.root:priority(primary):hover:not(:hoverStyle(underline)) {
  -st-mixin: createButtonFont(primary, hover, 'Body-M'),
    createButtonBorders(primary, hover, --primaryBorderWidth, --borderStyle, --primaryHoverLegacyBorderColor);

  color: createColor(--wix-ui-tpa-button-hover-text-color, createColorRaw(--wix-ui-tpa-button-main-text-color, var(--wst-button-primary-color-rgb, var(--wix-color-43)), 0.7));
  background-color: createColor(--wix-ui-tpa-button-hover-background-color, createColorRaw(--wix-ui-tpa-button-main-background-color, var(--wst-button-primary-background-color-rgb, var(--wix-color-41)), 0.7));
}

.root:priority(primary) .content {
  background-color: var(--wst-button-primary-text-highlight);
}

/*Secondary*/
.root:priority(secondary) {
  -st-mixin:
    createButtonCorners(secondary),
    createButtonFont(secondary, main, 'Body-M'),
    createButtonBorders(secondary, main, --secondaryBorderWidth, --borderStyle, --secondaryBorderColor);

  color: createColor(--wix-ui-tpa-button-main-text-color, var(--wst-button-secondary-color-rgb, var(--wix-color-49)));
  background-color: createColor(--wix-ui-tpa-button-main-background-color, var(--wst-button-secondary-background-color-rgb, var(--wix-color-47), 0));
  letter-spacing: var(--wix-ui-tpa-button-main-text-font-letter-spacing, var(--wst-button-secondary-letter-spacing));
  text-transform: var(--wix-ui-tpa-button-main-text-font-text-transform, var(--wst-button-secondary-text-transform));
  box-shadow: var(--wix-ui-tpa-button-main-box-shadow, var(--wst-button-secondary-box-shadow, 0 0));
  text-shadow: var(--wix-ui-tpa-button-main-text-shadow, var(--wst-button-secondary-text-shadow, 0 0 transparent)), var(--wix-ui-tpa-button-main-text-outline, var(--wst-button-secondary-text-outline, 0 0 transparent));
}

.root:priority(secondary):active:hoverStyle(underline),
.root:priority(secondary):hover:hoverStyle(underline) {
  -st-mixin: createButtonFont(secondary, hover, 'Body-M'),
    createButtonBorders(secondary, hover, --secondaryBorderWidth, --borderStyle, --secondaryHoverBorderColor);

  color: createColor((--wix-ui-tpa-button-hover-text-color, --wix-ui-tpa-button-main-text-color), var(--wst-button-secondary-color-rgb, var(--wix-color-49)));
  background-color: createColor(--wix-ui-tpa-button-hover-background-color, var(--wix-ui-tpa-button-main-background-color, var(--wst-button-secondary-background-color-rgb, var(--wix-color-47), 0)));
}

.root:priority(secondary):active:not(:hoverStyle(underline)),
.root:priority(secondary):hover:not(:hoverStyle(underline)) {
  -st-mixin: createButtonFont(secondary, hover, 'Body-M'),
    createButtonBorders(secondary, hover, --secondaryBorderWidth, --borderStyle, --secondaryHoverLegacyBorderColor);

  color: createColor(--wix-ui-tpa-button-hover-text-color, createColorRaw(--wix-ui-tpa-button-main-text-color, var(--wst-button-secondary-color-rgb, var(--wix-color-52)), 0.7));
  background-color: createColor(--wix-ui-tpa-button-hover-background-color, var(--wst-button-secondary-background-color-rgb, var(--wix-color-50), 0));
}

.root:priority(secondary) .content {
  background-color: var(--wst-button-secondary-text-highlight);
}

/*Disabled*/

.root:disabled,
.root:priority(basic):disabled {
  /* main text color and main boreder fallback is left for backwards compatibility */
  color: createColor((--wix-ui-tpa-button-disabled-text-color, --wix-ui-tpa-button-main-text-color), var(--wst-primary-background-color-rgb, var(--wix-color-1)));
  background-color: createColor(--wix-ui-tpa-button-disabled-background-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
  border-color: rgb(var(--basicDisabledBorderColor));
}

.root:priority(primary):disabled {
  /* main text color and main boreder fallback is left for backwards compatibility */
  color: createColor((--wix-ui-tpa-button-disabled-text-color, --wix-ui-tpa-button-main-text-color), var(--wst-primary-background-color-rgb, var(--wix-color-46)));
  background-color: createColor(--wix-ui-tpa-button-disabled-background-color, var(--wst-system-disabled-color-rgb, var(--wix-color-44)));
  border-color: rgb(var(--primaryDisabledBorderColor));
}

.root:priority(basicSecondary):disabled {
  color: createColor(--wix-ui-tpa-button-disabled-text-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
  background-color: createColor(--wix-ui-tpa-button-disabled-background-color, var(--wix-color-1), 0);
  border-color: rgb(var(--basicSecondaryDisabledBorderColor));
}

.root:priority(secondary):disabled {
  color: createColor(--wix-ui-tpa-button-disabled-text-color, var(--wst-secondary-background-color-rgb, var(--wix-color-55)));
  background-color: createColor(--wix-ui-tpa-button-disabled-background-color, (var(--wst-system-disabled-color-rgb, var(--wix-color-53), 0)));
  border-color: rgb(var(--secondaryDisabledBorderColor));
}

/*Tiny*/
.root:size(tiny) {
  padding: 6px 16px;
}

.root:size(tiny).hasIcon {
  padding: 5.5px 16px;
}

/*Small*/
.root:size(small) {
  padding: 7px 16px;
}

/*Medium*/
.root,
.root:size(medium) {
  padding: 8px 16px;
}

.root:mobile,
.root:mobile:size(medium) {
  padding: 10px 16px;
}

/*Large*/
.root:size(large) {
  padding: 10px 16px;
}

/* Icons */

.affixIcon svg {
  height: 1.5em;
  width: 1.5em;
  margin: calc(-1 * (1.5em / 4)) 0;
}

.prefix-icon::after,
.suffix-icon::before {
  content: '';
  width: var(--wix-ui-tpa-button-column-gap, 4px);
  height: 1px;
  display: inline-block;
}

.root .affixIcon svg[fill="currentColor"] {
  transition: color .2s ease-in-out;
  color: createColor(--wix-ui-tpa-button-main-text-color, var(--wix-color-1));
}

.root:hover:not(:hoverStyle(underline)) .affixIcon svg[fill="currentColor"] {
  color: createColor(--wix-ui-tpa-button-hover-text-color, createColorRaw(--wix-ui-tpa-button-main-text-color, var(--wix-color-1), 0.7));
}

.root:priority(secondary) .affixIcon svg[fill="currentColor"] {
  color: createColor(--wix-ui-tpa-button-main-text-color, var(--wix-color-49));
}

.root:priority(secondary):hover:not(:hoverStyle(underline)) .affixIcon svg[fill="currentColor"] {
  color: createColor(--wix-ui-tpa-button-hover-text-color, createColorRaw(--wix-ui-tpa-button-main-text-color, var(--wix-color-52), 0.7));
}

.root:priority(basicSecondary) .affixIcon svg[fill="currentColor"] {
  color: createColor(--wix-ui-tpa-button-main-text-color, var(--wix-color-5));
}

.root:priority(basicSecondary):hover:not(:hoverStyle(underline)) .affixIcon svg[fill="currentColor"] {
  color: createColor(--wix-ui-tpa-button-hover-text-color, createColorRaw(--wix-ui-tpa-button-main-text-color, var(--wix-color-5), 0.7));
}

/* ---------- Layout Modes ---------- */


.root:paddingMode(dynamicPaddings),
.root:paddingMode(explicitPaddings) {
  box-sizing: border-box;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-flex;
}

.root:paddingMode(dynamicPaddings)::content,
.root:paddingMode(explicitPaddings)::content {
  overflow: visible;
  text-overflow: unset;
  white-space: unset;
}

.root:paddingMode(dynamicPaddings):wrapContent,
.root:paddingMode(explicitPaddings):wrapContent {
  white-space: normal;
  line-height: 1.3 !important;
}

/* dynamicPaddings */

.root:paddingMode(dynamicPaddings):size(small):not(:mobile),
.root:paddingMode(dynamicPaddings):size(large):not(:mobile) {
  line-height: 1;
}

/* Tiny */

.root:paddingMode(dynamicPaddings):priority(secondary):size(tiny),
.root:paddingMode(dynamicPaddings):priority(basicSecondary):size(tiny) {
  padding: calc(9px - var(--wix-ui-tpa-button-main-border-width, 1px)) 16px;
}

.root:paddingMode(dynamicPaddings):size(tiny),
.root:paddingMode(dynamicPaddings):size(tiny):priority(primary),
.root:paddingMode(dynamicPaddings):size(tiny):priority(basic) {
  padding: calc(9px - var(--wix-ui-tpa-button-main-border-width, 0px)) 16px;
}

.root:paddingMode(dynamicPaddings):size(tiny):priority(secondary):wrapContent,
.root:paddingMode(dynamicPaddings):size(tiny):priority(basicSecondary):wrapContent {
  padding: calc(6.9px - var(--wix-ui-tpa-button-main-border-width, 1px)) 16px;
}

.root:paddingMode(dynamicPaddings):size(tiny):wrapContent,
.root:paddingMode(dynamicPaddings):size(tiny):priority(primary):wrapContent,
.root:paddingMode(dynamicPaddings):size(tiny):priority(basic):wrapContent {
  padding: calc(6.9px - var(--wix-ui-tpa-button-main-border-width, 0px)) 16px;
}

/* Small */

.root:paddingMode(dynamicPaddings):size(small):priority(secondary),
.root:paddingMode(dynamicPaddings):size(small):priority(basicSecondary) {
  padding: calc(10px - var(--wix-ui-tpa-button-main-border-width, 1px)) 16px;
}

.root:paddingMode(dynamicPaddings):size(small),
.root:paddingMode(dynamicPaddings):size(small):priority(primary),
.root:paddingMode(dynamicPaddings):size(small):priority(basic) {
  padding: calc(10px - var(--wix-ui-tpa-button-main-border-width, 0px)) 16px;
}

.root:paddingMode(dynamicPaddings):size(small):wrapContent:priority(secondary),
.root:paddingMode(dynamicPaddings):size(small):wrapContent:priority(basicSecondary) {
  padding: calc(7.6px - var(--wix-ui-tpa-button-main-border-width, 1px)) 16px;
}

.root:paddingMode(dynamicPaddings):size(small):wrapContent,
.root:paddingMode(dynamicPaddings):size(small):priority(primary):wrapContent,
.root:paddingMode(dynamicPaddings):size(small):priority(basic):wrapContent {
  padding: calc(7.6px - var(--wix-ui-tpa-button-main-border-width, 0px)) 16px;
}

.root:paddingMode(dynamicPaddings):size(small):priority(secondary):mobile,
.root:paddingMode(dynamicPaddings):size(small):priority(basicSecondary):mobile {
  padding: calc(11px - var(--wix-ui-tpa-button-main-border-width, 1px)) 16px;
}

.root:paddingMode(dynamicPaddings):size(small):mobile,
.root:paddingMode(dynamicPaddings):size(small):priority(primary):mobile,
.root:paddingMode(dynamicPaddings):size(small):priority(basic):mobile {
  padding: calc(11px - var(--wix-ui-tpa-button-main-border-width, 0px)) 16px;
}

.root:paddingMode(dynamicPaddings):size(small):wrapContent:priority(secondary):mobile,
.root:paddingMode(dynamicPaddings):size(small):wrapContent:priority(basicSecondary):mobile {
  padding: calc(8.9px - var(--wix-ui-tpa-button-main-border-width, 1px)) 16px;
}

.root:paddingMode(dynamicPaddings):size(small):wrapContent:mobile,
.root:paddingMode(dynamicPaddings):size(small):priority(primary):wrapContent:mobile,
.root:paddingMode(dynamicPaddings):size(small):priority(basic):wrapContent:mobile {
  padding: calc(8.9px - var(--wix-ui-tpa-button-main-border-width, 0px)) 16px;
}

/* Medium */

.root:paddingMode(dynamicPaddings):priority(secondary),
.root:paddingMode(dynamicPaddings):priority(basicSecondary),
.root:paddingMode(dynamicPaddings):size(medium):priority(secondary),
.root:paddingMode(dynamicPaddings):size(medium):priority(basicSecondary) {
  padding: calc(12px - var(--wix-ui-tpa-button-main-border-width, 1px)) 16px;
}

.root:paddingMode(dynamicPaddings),
.root:paddingMode(dynamicPaddings):priority(primary),
.root:paddingMode(dynamicPaddings):priority(basic),
.root:paddingMode(dynamicPaddings):size(medium),
.root:paddingMode(dynamicPaddings):size(medium):priority(primary),
.root:paddingMode(dynamicPaddings):size(medium):priority(basic) {
  padding: calc(12px - var(--wix-ui-tpa-button-main-border-width, 0px)) 16px;
}

.root:paddingMode(dynamicPaddings):wrapContent:priority(secondary),
.root:paddingMode(dynamicPaddings):wrapContent:priority(basicSecondary),
.root:paddingMode(dynamicPaddings):size(medium):wrapContent:priority(secondary),
.root:paddingMode(dynamicPaddings):size(medium):wrapContent:priority(basicSecondary) {
  padding: calc(9.6px - var(--wix-ui-tpa-button-main-border-width, 1px)) 16px;
}

.root:paddingMode(dynamicPaddings):wrapContent,
.root:paddingMode(dynamicPaddings):priority(primary):wrapContent,
.root:paddingMode(dynamicPaddings):priority(basic):wrapContent,
.root:paddingMode(dynamicPaddings):size(medium):wrapContent,
.root:paddingMode(dynamicPaddings):size(medium):priority(primary):wrapContent,
.root:paddingMode(dynamicPaddings):size(medium):priority(basic):wrapContent {
  padding: calc(9.6px - var(--wix-ui-tpa-button-main-border-width, 0px)) 16px;
}

.root:paddingMode(dynamicPaddings):priority(secondary):mobile,
.root:paddingMode(dynamicPaddings):priority(basicSecondary):mobile,
.root:paddingMode(dynamicPaddings):size(medium):priority(secondary):mobile,
.root:paddingMode(dynamicPaddings):size(medium):priority(basicSecondary):mobile {
  padding: calc(13px - var(--wix-ui-tpa-button-main-border-width, 1px)) 16px;
}

.root:paddingMode(dynamicPaddings):priority(basic):mobile,
.root:paddingMode(dynamicPaddings):priority(primary):mobile,
.root:paddingMode(dynamicPaddings):size(medium):mobile,
.root:paddingMode(dynamicPaddings):size(medium):priority(primary):mobile,
.root:paddingMode(dynamicPaddings):size(medium):priority(basic):mobile {
  padding: calc(13px - var(--wix-ui-tpa-button-main-border-width, 0px)) 16px;
}

.root:paddingMode(dynamicPaddings):wrapContent:priority(secondary):mobile,
.root:paddingMode(dynamicPaddings):wrapContent:priority(basicSecondary):mobile,
.root:paddingMode(dynamicPaddings):size(medium):wrapContent:priority(secondary):mobile,
.root:paddingMode(dynamicPaddings):size(medium):wrapContent:priority(basicSecondary):mobile {
  padding: calc(10.9px - var(--wix-ui-tpa-button-main-border-width, 1px)) 16px;
}

.root:paddingMode(dynamicPaddings):priority(basic):wrapContent:mobile,
.root:paddingMode(dynamicPaddings):priority(primary):wrapContent:mobile,
.root:paddingMode(dynamicPaddings):size(medium):wrapContent:mobile,
.root:paddingMode(dynamicPaddings):size(medium):priority(primary):wrapContent:mobile,
.root:paddingMode(dynamicPaddings):size(medium):priority(basic):wrapContent:mobile {
  padding: calc(10.9px - var(--wix-ui-tpa-button-main-border-width, 0px)) 16px;
}

/* Large */

.root:paddingMode(dynamicPaddings):size(large):priority(secondary),
.root:paddingMode(dynamicPaddings):size(large):priority(basicSecondary) {
  padding: calc(16px - var(--wix-ui-tpa-button-main-border-width, 1px)) 16px;
}

.root:paddingMode(dynamicPaddings):size(large),
.root:paddingMode(dynamicPaddings):size(large):priority(primary),
.root:paddingMode(dynamicPaddings):size(large):priority(basic) {
  padding: calc(16px - var(--wix-ui-tpa-button-main-border-width, 0px)) 16px;
}

.root:paddingMode(dynamicPaddings):size(large):priority(secondary):wrapContent,
.root:paddingMode(dynamicPaddings):size(large):priority(basicSecondary):wrapContent {
  padding: calc(13.6px - var(--wix-ui-tpa-button-main-border-width, 1px)) 16px;
}

.root:paddingMode(dynamicPaddings):size(large):wrapContent,
.root:paddingMode(dynamicPaddings):size(large):priority(primary):wrapContent,
.root:paddingMode(dynamicPaddings):size(large):priority(basic):wrapContent {
  padding: calc(13.6px - var(--wix-ui-tpa-button-main-border-width, 0px)) 16px;
}

.root:paddingMode(dynamicPaddings):size(large):priority(secondary):mobile,
.root:paddingMode(dynamicPaddings):size(large):priority(basicSecondary):mobile {
  padding: calc(17px - var(--wix-ui-tpa-button-main-border-width, 1px)) 16px;
}

.root:paddingMode(dynamicPaddings):size(large):mobile,
.root:paddingMode(dynamicPaddings):size(large):priority(primary):mobile,
.root:paddingMode(dynamicPaddings):size(large):priority(basic):mobile {
  padding: calc(17px - var(--wix-ui-tpa-button-main-border-width, 1px)) 16px;
}

.root:paddingMode(dynamicPaddings):size(large):priority(secondary):wrapContent:mobile,
.root:paddingMode(dynamicPaddings):size(large):priority(basicSecondary):wrapContent:mobile {
  padding: calc(14.9px - var(--wix-ui-tpa-button-main-border-width, 1px)) 16px;
}

.root:paddingMode(dynamicPaddings):size(large):wrapContent:mobile,
.root:paddingMode(dynamicPaddings):size(large):priority(primary):wrapContent:mobile,
.root:paddingMode(dynamicPaddings):size(large):priority(basic):wrapContent:mobile {
  padding: calc(14.9px - var(--wix-ui-tpa-button-main-border-width, 1px)) 16px;
}

/* explicitPaddings */

.root:paddingMode(explicitPaddings),
.root:paddingMode(explicitPaddings):size(medium) {
  padding-inline-start: var(--wix-ui-tpa-button-padding-inline-start, 15px);
  padding-inline-end: var(--wix-ui-tpa-button-padding-inline-end, 15px);
  border-width: var(--wix-ui-tpa-button-main-border-width, 1px);
}

.root:paddingMode(explicitPaddings),
.root:paddingMode(explicitPaddings):priority(basic) {
  -st-mixin: createButtonBorders(basic, main, --basicBorderExPaddingWidth, --borderStyle, --basicBorderColor);
}

.root:paddingMode(explicitPaddings):hover,
.root:paddingMode(explicitPaddings):priority(basic):hover {
  -st-mixin: createButtonBorders(basic, hover, --basicBorderExPaddingWidth, --borderStyle, --basicHoverBorderColor);
}

.root:paddingMode(explicitPaddings):not(:hoverStyle(underline)):hover,
.root:paddingMode(explicitPaddings):priority(basic):not(:hoverStyle(underline)):hover {
  -st-mixin: createButtonBorders(basic, hover, --basicBorderExPaddingWidth, --borderStyle, --basicHoverLegacyBorderColor);
}

.root:paddingMode(explicitPaddings):disabled,
.root:paddingMode(explicitPaddings):priority(basic):disabled {
  -st-mixin: createButtonBorders(basic, disabled, --basicBorderExPaddingWidth, --borderStyle, --basicDisabledBorderColor);
}

.root:paddingMode(explicitPaddings):priority(basicSecondary) {
  -st-mixin: createButtonBorders(basicSecondary, main, --basicSecondaryBorderWidth, --borderStyle, --basicSecondaryBorderColor);
}

.root:paddingMode(explicitPaddings):priority(basicSecondary):hover {
  -st-mixin: createButtonBorders(basicSecondary, hover, --basicSecondaryBorderWidth, --borderStyle, --basicSecondaryHoverBorderColor);
}

.root:paddingMode(explicitPaddings):priority(basicSecondary):not(:hoverStyle(underline)):hover {
  -st-mixin: createButtonBorders(basicSecondary, hover, --basicSecondaryBorderWidth, --borderStyle, --basicSecondaryHoverLegacyBorderColor);
}

.root:paddingMode(explicitPaddings):priority(basicSecondary):disabled {
  -st-mixin: createButtonBorders(basicSecondary, disabled, --basicSecondaryBorderWidth, --borderStyle, --basicSecondaryDisabledBorderColor);
}

.root:paddingMode(explicitPaddings):priority(primary) {
  -st-mixin: createButtonBorders(primary, main, --primaryBorderExPaddingWidth, --borderStyle, --primaryBorderColor);
}

.root:paddingMode(explicitPaddings):priority(primary):hover {
  -st-mixin: createButtonBorders(primary, hover, --primaryBorderExPaddingWidth, --borderStyle, --primaryHoverBorderColor);
}

.root:paddingMode(explicitPaddings):priority(primary):not(:hoverStyle(underline)):hover {
  -st-mixin: createButtonBorders(primary, hover, --primaryBorderExPaddingWidth, --borderStyle, --primaryHoverLegacyBorderColor);
}

.root:paddingMode(explicitPaddings):priority(primary):disabled {
  -st-mixin: createButtonBorders(primary, disabled, --primaryBorderExPaddingWidth, --borderStyle, --primaryDisabledBorderColor);
}

.root:paddingMode(explicitPaddings):priority(secondary) {
  -st-mixin: createButtonBorders(secondary, main, --secondaryBorderWidth, --borderStyle, --secondaryBorderColor);
}

.root:paddingMode(explicitPaddings):priority(secondary):hover {
  -st-mixin: createButtonBorders(secondary, hover, --secondaryBorderWidth, --borderStyle, --secondaryHoverBorderColor);
}

.root:paddingMode(explicitPaddings):priority(secondary):not(:hoverStyle(underline)):hover {
  -st-mixin: createButtonBorders(secondary, hover, --secondaryBorderWidth, --borderStyle, --secondaryHoverLegacyBorderColor);
}

.root:paddingMode(explicitPaddings):priority(secondary):disabled {
  -st-mixin: createButtonBorders(secondary, disabled, --secondaryBorderWidth, --borderStyle, --secondaryDisabledBorderColor);
}

/* Sizes */

.root:paddingMode(explicitPaddings):size(tiny),
.root:paddingMode(explicitPaddings):size(small) {
  padding-block-start: var(--wix-ui-tpa-button-padding-block-start, 5px);
  padding-block-end: var(--wix-ui-tpa-button-padding-block-end, 5px);
}

.root:paddingMode(explicitPaddings),
.root:paddingMode(explicitPaddings):size(medium) {
  padding-block-start: var(--wix-ui-tpa-button-padding-block-start, 7px);
  padding-block-end: var(--wix-ui-tpa-button-padding-block-end, 7px);
}

.root:paddingMode(explicitPaddings):size(large) {
  padding-block-start: var(--wix-ui-tpa-button-padding-block-start, 11px);
  padding-block-end: var(--wix-ui-tpa-button-padding-block-end, 11px);
}

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