@st-namespace 'Button-deprecated-st-css';
:import {
  -st-from: "../internal/WixUiCoreComponents/components/CoreButtonNext/CoreButtonNext.st.css";
  -st-default: ButtonNext;
}

:import {
  -st-from: "../../common/formatters.st";
  -st-named: color, fallback, calculate, font, applyOpacity, string;
}

:vars {
  /*Constance*/
  MinWidth: 100px;
  PrimaryColor: color-8;
  SecondaryColor: color-1;
  BasicColor: color-5;
  DisabledColor: color-3;
  BorderWidth: 1;
  BorderRadius: 0;
  TinyFont: "{theme: 'Body-M', size: '14px', lineHeight: '1.43em'}";
  SmallFont: "{theme: 'Body-M', size: '16px', lineHeight: '1.5em'}";
  MediumFont: "{theme: 'Body-M', size: '16px', lineHeight: '1.5em'}";
  LargeFont: "{theme: 'Body-M', size: '20px', lineHeight: '1.5em'}";
  MobileMediumFont: "{theme: 'Body-M', size: '14px', lineHeight: '1.44em'}";
}

/*Overrides*/
:vars {
  /*
      The Button Text color
      @default color-1
  */
  MainTextColor: --overridable;
  /*
      The Button Background color
      @default color-5
  */
  MainBackgroundColor: --overridable;
  /*
      The Button Background color on hover
      @default color-5 with 0.7 opacity
  */
  HoverBackgroundColor: --overridable;
  /*
      The font of the button's text
      @default {theme: 'Body-M', size: '14px', lineHeight: '1.43em'}
  */
  MainTextFont: --overridable;
  /*
      The border of the button
      @default color-8
  */
  MainBorderColor: --overridable;
  /*
      The border of the button on hover
      @default Basic and Primary: color-8, basicSecondary and secondary: color-8 with 0.7 opacity
  */
  HoverBorderColor: --overridable;
  /*
      The button's border width
      @default Basic and Primary: 0px, basicSecondary and secondary: 1px
  */
  MainBorderWidth: --overridable;
  /*
      The button border radius
      @default 0
  */
  MainBorderRadius: --overridable;
  /*
      The text hover color
      @default color-1 with 0.7 opacity
  */
  HoverTextColor: --overridable;
}

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

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

/*
 * The Button Background color on hover
 * @type color
 * @default --wix-color-5 with 0.7 opacity
 */
@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 border of the button
 * @type color
 * @default --wix-color-8
 */
@property st-global(--wix-ui-tpa-button-main-border-color);

/*
 * The border of the button on hover
 * @type color
 * @default Basic and Primary: --wix-color-8, basicSecondary and secondary: --wix-color-8 with 0.7 opacity
 */
@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
 * @default --wix-color-1 with 0.7 opacity
 */
@property st-global(--wix-ui-tpa-button-hover-text-color);

:vars {
  PrimaryTextColor: color(fallback(value(MainTextColor), value(SecondaryColor)));
  PrimaryBorderWidth: fallback(value(MainBorderWidth), 0px);
  PrimaryBorderColor: color(fallback(value(MainBorderColor), value(PrimaryColor)));
  PrimaryBorderRadius: fallback(value(MainBorderRadius), value(BorderRadius));
}

.root {
  -st-extends: ButtonNext;
  -st-states: priority(enum(primary, secondary, basic, basicSecondary)), size(enum(tiny, small, medium, large)), fullWidth, mobile, paddingMode(enum(dynamicPaddings)), wrapContent;

  min-width: value(MinWidth);
  border-style: solid;
  box-sizing: content-box;
  border-color: color(value(PrimaryBorderColor));
  border-radius: value(PrimaryBorderRadius);
  transition: background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out, border-width .2s ease-in-out;
}

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

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

/*Basic*/

:vars {
  BasicBackgroundColor: color(fallback(value(MainBackgroundColor), value(BasicColor)));
}

.root, .root:priority(basic) {
  color: value(PrimaryTextColor);
  background-color: value(BasicBackgroundColor);
  border-width: value(PrimaryBorderWidth);
}

.root:active, .root:priority(basic):active,
.root:focus, .root:priority(basic):focus,
.root:hover, .root:priority(basic):hover {
  background-color: color(fallback(value(HoverBackgroundColor), applyOpacity(value(BasicBackgroundColor), 0.7)));
  color: fallback(value(HoverTextColor),applyOpacity(value(PrimaryTextColor), 0.7));
  border-color: fallback(value(HoverBorderColor), value(PrimaryBorderColor));
}

/*BasicSecondary*/

:vars {
  BasicSecondaryTextColor: color(fallback(value(MainTextColor), value(BasicColor)));
  BasicSecondaryBorderColor: color(fallback(value(MainBorderColor), value(BasicColor)));
}

.root:priority(basicSecondary) {
  color: value(BasicSecondaryTextColor);
  background-color: color(fallback(value(MainBackgroundColor), transparent));
  border-color: value(BasicSecondaryBorderColor);
  border-width: fallback(value(MainBorderWidth), 1px);
}

.root:priority(basicSecondary):active,
.root:priority(basicSecondary):focus,
.root:priority(basicSecondary):hover {
  color: fallback(value(HoverTextColor), applyOpacity(value(BasicSecondaryTextColor), 0.7));
  border-color: fallback(value(HoverBorderColor), applyOpacity(value(BasicSecondaryBorderColor), 0.7));
}

/*Primary*/

:vars {
  PrimaryBackgroundColor: color(fallback(value(MainBackgroundColor), value(PrimaryColor)));
}

.root:priority(primary) {
  color: value(PrimaryTextColor);
  background-color: value(PrimaryBackgroundColor);
  border-width: value(PrimaryBorderWidth);
}

.root:priority(primary):active,
.root:priority(primary):focus,
.root:priority(primary):hover {
  background-color: color(fallback(value(HoverBackgroundColor), applyOpacity(value(PrimaryBackgroundColor), 0.7)));
  color: fallback(value(HoverTextColor), applyOpacity(value(PrimaryTextColor), 0.7));
  border-color: fallback(value(HoverBorderColor), value(PrimaryBorderColor));
}

/*Secondary*/

:vars {
  SecondaryTextColor: color(fallback(value(MainTextColor), value(PrimaryColor)));
  SecondaryBorderColor: color(fallback(value(MainBorderColor), value(PrimaryColor)));
}

.root:priority(secondary) {
  color: value(SecondaryTextColor);
  background-color: color(fallback(value(MainBackgroundColor), transparent));
  border-color: value(SecondaryBorderColor);
  border-width: fallback(value(MainBorderWidth), 1px);
}

.root:priority(secondary):active,
.root:priority(secondary):focus,
.root:priority(secondary):hover {
  color: fallback(value(HoverTextColor), applyOpacity(value(SecondaryTextColor), 0.7));
  border-color: fallback(value(HoverBorderColor), applyOpacity(value(SecondaryBorderColor), 0.7));
}

/*Disabled*/

.root:disabled,
.root:priority(basic):disabled,
.root:priority(primary):disabled {
  background-color: color(value(DisabledColor));
}

.root:priority(basicSecondary):disabled,
.root:priority(secondary):disabled {
  color: color(value(DisabledColor));
  background-color: color(transparent);
  border-color: color(value(DisabledColor));
}

/*Tiny*/

.root:size(tiny) {
  padding: 6px 16px;
  font: fallback(font(value(MainTextFont)), font(value(TinyFont)));
}

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

.root:size(small) {
  padding: 7px 16px;
  font: fallback(font(value(MainTextFont)), font(value(SmallFont)));
}

/*Medium*/

.root, .root:size(medium) {
  padding: 8px 16px;
  font: fallback(font(value(MainTextFont)), font(value(MediumFont)));
}

.root:mobile, .root:mobile:size(medium) {
  padding: 10px 16px;
  font: fallback(font(value(MainTextFont)), font(value(MobileMediumFont)));
}

/*Large*/

.root:size(large) {
  padding: 10px 16px;
  font: fallback(font(value(MainTextFont)), font(value(LargeFont)));
}

/*-------------------------------------upgrage-------------------------------------*/

:vars {
  UpgradeTinyFont: "{theme: 'Body-M', size: '14px', lineHeight: '1'}";
  UpgradeSmallFont: "{theme: 'Body-M', size: '16px', lineHeight: '1'}";
  UpgradeMediumFont: "{theme: 'Body-M', size: '16px', lineHeight: '1'}";
  UpgradeLargeFont: "{theme: 'Body-M', size: '16px', lineHeight: '1'}";
  UpgradeMobileMediumFont: "{theme: 'Body-M', size: '14px', lineHeight: '1'}";
}

:vars {
  mobileFont: fallback(font(value(MainTextFont)), font(value(UpgradeMobileMediumFont)));
  secondaryBorderWidth: fallback(value(MainBorderWidth), 1px);

  tinyTopBottomPadding: 9px;
  tinyWrapContentTopBottomPadding: 6.9px; /* 9 - (line-height diff (0.3) * font-size (14px) / 2) */
  smallTopBottomPadding: 10px;
  smallWrapContentTopBottomPadding: 7.6px; /* 10 - (line-height diff (0.3) * font-size (16px) / 2) */
  smallMobileTopBottomPadding: 11px;
  smallMobileWrapContentTopBottomPadding: 8.9px; /* 11 - (line-height diff (0.3) * mobile font-size (14px) / 2) */
  mediumTopBottomPadding: 12px;
  mediumWrapContentTopBottomPadding: 9.6px; /* 12 - (line-height diff (0.3) * font-size (16px) / 2) */
  mediumMobileTopBottomPadding: 13px;
  mediumMobileWrapContentTopBottomPadding: 10.9px; /* 13 - (line-height diff (0.3) * mobile font-size (14px) / 2) */
  largeTopBottomPadding: 16px;
  largeWrapContentTopBottomPadding: 13.6px; /* 16- (line-height diff (0.3) * font-size (16px) / 2) */
  largeMobileTopBottomPadding: 17px;
  largeMobileWrapContentTopBottomPadding: 14.9px; /* 17 - (line-height diff (0.3) * mobile font-size (14px) / 2) */
}

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

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

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

.root:mobile:paddingMode(dynamicPaddings){
  font: value(mobileFont);
  line-height: 1;
}

/* upgrade Tiny*/

.root:size(tiny):paddingMode(dynamicPaddings):not(:mobile) {
  font: fallback(font(value(MainTextFont)), font(value(UpgradeTinyFont)));
  line-height: 1;
}

.root:priority(secondary):paddingMode(dynamicPaddings):size(tiny), .root:priority(basicSecondary):paddingMode(dynamicPaddings):size(tiny) {
  padding: calculate(string(-), value(tinyTopBottomPadding), value(secondaryBorderWidth)) 16px;
}

.root:paddingMode(dynamicPaddings):size(tiny), .root:priority(primary):paddingMode(dynamicPaddings):size(tiny), .root:priority(basic):paddingMode(dynamicPaddings):size(tiny) {
  padding: calculate(string(-), value(tinyTopBottomPadding), value(PrimaryBorderWidth)) 16px;
}

.root:priority(secondary):paddingMode(dynamicPaddings):wrapContent:size(tiny), .root:priority(basicSecondary):paddingMode(dynamicPaddings):wrapContent:size(tiny) {
  padding: calculate(string(-), value(tinyWrapContentTopBottomPadding), value(secondaryBorderWidth)) 16px;
}

.root:paddingMode(dynamicPaddings):wrapContent:size(tiny), .root:priority(primary):paddingMode(dynamicPaddings):wrapContent:size(tiny), .root:priority(basic):paddingMode(dynamicPaddings):wrapContent:size(tiny) {
  padding: calculate(string(-), value(tinyWrapContentTopBottomPadding), value(PrimaryBorderWidth)) 16px;
}

/* upgrade Small*/

.root:size(small):paddingMode(dynamicPaddings):not(:mobile) {
  font: fallback(font(value(MainTextFont)), font(value(UpgradeSmallFont)));
  line-height: 1;
}

.root:paddingMode(dynamicPaddings):priority(secondary):size(small), .root:paddingMode(dynamicPaddings):priority(basicSecondary):size(small){
  padding: calculate(string(-), value(smallTopBottomPadding), value(secondaryBorderWidth)) 16px;
}

.root:paddingMode(dynamicPaddings):size(small), .root:priority(primary):paddingMode(dynamicPaddings):size(small), .root:priority(basic):paddingMode(dynamicPaddings):size(small){
  padding: calculate(string(-), value(smallTopBottomPadding), value(PrimaryBorderWidth)) 16px;
}

.root:paddingMode(dynamicPaddings):wrapContent:priority(secondary):size(small), .root:paddingMode(dynamicPaddings):wrapContent:priority(basicSecondary):size(small){
  padding: calculate(string(-), value(smallWrapContentTopBottomPadding), value(secondaryBorderWidth)) 16px;
}

.root:paddingMode(dynamicPaddings):wrapContent:size(small), .root:priority(primary):paddingMode(dynamicPaddings):wrapContent:size(small), .root:priority(basic):paddingMode(dynamicPaddings):wrapContent:size(small){
  padding: calculate(string(-), value(smallWrapContentTopBottomPadding), value(PrimaryBorderWidth)) 16px;
}

/*upgrade small mobile*/
.root:paddingMode(dynamicPaddings):priority(secondary):size(small):mobile, .root:paddingMode(dynamicPaddings):priority(basicSecondary):size(small):mobile{
  padding: calculate(string(-), value(smallMobileTopBottomPadding), value(secondaryBorderWidth)) 16px;
}

.root:paddingMode(dynamicPaddings):size(small):mobile, .root:priority(primary):paddingMode(dynamicPaddings):size(small):mobile, .root:priority(basic):paddingMode(dynamicPaddings):size(small):mobile{
  padding: calculate(string(-), value(smallMobileTopBottomPadding), value(PrimaryBorderWidth)) 16px;
}

.root:paddingMode(dynamicPaddings):wrapContent:priority(secondary):size(small):mobile, .root:paddingMode(dynamicPaddings):wrapContent:priority(basicSecondary):size(small):mobile{
  padding: calculate(string(-), value(smallMobileWrapContentTopBottomPadding), value(secondaryBorderWidth)) 16px;
}

.root:paddingMode(dynamicPaddings):wrapContent:size(small):mobile, .root:priority(primary):paddingMode(dynamicPaddings):wrapContent:size(small):mobile, .root:priority(basic):paddingMode(dynamicPaddings):wrapContent:size(small):mobile{
  padding: calculate(string(-), value(smallMobileWrapContentTopBottomPadding), value(PrimaryBorderWidth)) 16px;
}

/* upgrade Medium*/

.root:paddingMode(dynamicPaddings):not(:mobile), .root:size(medium):paddingMode(dynamicPaddings):not(:mobile){
  font: fallback(font(value(MainTextFont)), font(value(UpgradeMediumFont)));
  line-height: 1;
}

.root:paddingMode(dynamicPaddings):priority(secondary), .root:paddingMode(dynamicPaddings):priority(secondary):size(medium),
.root:paddingMode(dynamicPaddings):priority(basicSecondary), .root:paddingMode(dynamicPaddings):priority(basicSecondary):size(medium) {
  padding: calculate(string(-), value(mediumTopBottomPadding), value(secondaryBorderWidth)) 16px;
}

.root:paddingMode(dynamicPaddings),
.root:paddingMode(dynamicPaddings):size(medium),
.root:priority(primary):paddingMode(dynamicPaddings), .root:priority(primary):paddingMode(dynamicPaddings):size(medium),
.root:priority(basic):paddingMode(dynamicPaddings), .root:priority(basic):paddingMode(dynamicPaddings):size(medium) {
  padding: calculate(string(-), value(mediumTopBottomPadding), value(PrimaryBorderWidth)) 16px;
}

.root:paddingMode(dynamicPaddings):wrapContent:priority(secondary), .root:paddingMode(dynamicPaddings):wrapContent:priority(secondary):size(medium),
.root:paddingMode(dynamicPaddings):wrapContent:priority(basicSecondary), .root:paddingMode(dynamicPaddings):wrapContent:priority(basicSecondary):size(medium) {
  padding: calculate(string(-), value(mediumWrapContentTopBottomPadding), value(secondaryBorderWidth)) 16px;
}

.root:paddingMode(dynamicPaddings):wrapContent,
.root:paddingMode(dynamicPaddings):wrapContent:size(medium),
.root:priority(primary):paddingMode(dynamicPaddings):wrapContent, .root:priority(primary):paddingMode(dynamicPaddings):wrapContent:size(medium),
.root:priority(basic):paddingMode(dynamicPaddings):wrapContent, .root:priority(basic):paddingMode(dynamicPaddings):wrapContent:size(medium) {
  padding: calculate(string(-), value(mediumWrapContentTopBottomPadding), value(PrimaryBorderWidth)) 16px;
}

/*upgrade mobile medium*/
.root:paddingMode(dynamicPaddings):priority(secondary):mobile, .root:paddingMode(dynamicPaddings):priority(secondary):size(medium):mobile,
.root:paddingMode(dynamicPaddings):priority(basicSecondary):mobile, .root:paddingMode(dynamicPaddings):priority(basicSecondary):size(medium):mobile {
  padding: calculate(string(-), value(mediumMobileTopBottomPadding), value(secondaryBorderWidth)) 16px;
}

.root:paddingMode(dynamicPaddings):size(medium):mobile,
.root:priority(primary):paddingMode(dynamicPaddings):mobile, .root:priority(primary):paddingMode(dynamicPaddings):size(medium):mobile,
.root:priority(basic):paddingMode(dynamicPaddings):mobile, .root:priority(basic):paddingMode(dynamicPaddings):size(medium):mobile  {
  padding: calculate(string(-), value(mediumMobileTopBottomPadding), value(PrimaryBorderWidth)) 16px;
}
/*upgrade mobile medium*/
.root:paddingMode(dynamicPaddings):wrapContent:priority(secondary):mobile, .root:paddingMode(dynamicPaddings):wrapContent:priority(secondary):size(medium):mobile,
.root:paddingMode(dynamicPaddings):wrapContent:priority(basicSecondary):mobile, .root:paddingMode(dynamicPaddings):wrapContent:priority(basicSecondary):size(medium):mobile {
  padding: calculate(string(-), value(mediumMobileWrapContentTopBottomPadding), value(secondaryBorderWidth)) 16px;
}

.root:paddingMode(dynamicPaddings):wrapContent:size(medium):mobile,
.root:priority(primary):paddingMode(dynamicPaddings):wrapContent:mobile, .root:priority(primary):paddingMode(dynamicPaddings):wrapContent:size(medium):mobile,
.root:priority(basic):paddingMode(dynamicPaddings):wrapContent:mobile, .root:priority(basic):paddingMode(dynamicPaddings):wrapContent:size(medium):mobile  {
  padding: calculate(string(-), value(mediumMobileWrapContentTopBottomPadding), value(PrimaryBorderWidth)) 16px;
}

/* upgrade Large*/

.root:size(large):paddingMode(dynamicPaddings):not(:mobile){
  font: fallback(font(value(MainTextFont)), font(value(UpgradeLargeFont)));
  line-height: 1;
}

.root:size(large):paddingMode(dynamicPaddings):priority(secondary), .root:size(large):paddingMode(dynamicPaddings):priority(basicSecondary){
  padding: calculate(string(-), value(largeTopBottomPadding), value(secondaryBorderWidth)) 16px;
}

.root:paddingMode(dynamicPaddings):size(large), .root:priority(primary):paddingMode(dynamicPaddings):size(large), .root:priority(basic):paddingMode(dynamicPaddings):size(large){
  padding: calculate(string(-), value(largeTopBottomPadding), value(PrimaryBorderWidth)) 16px;
}

.root:size(large):paddingMode(dynamicPaddings):wrapContent:priority(secondary), .root:size(large):paddingMode(dynamicPaddings):wrapContent:priority(basicSecondary){
  padding: calculate(string(-), value(largeWrapContentTopBottomPadding), value(secondaryBorderWidth)) 16px;
}

.root:paddingMode(dynamicPaddings):wrapContent:size(large), .root:priority(primary):paddingMode(dynamicPaddings):wrapContent:size(large), .root:priority(basic):paddingMode(dynamicPaddings):wrapContent:size(large){
  padding: calculate(string(-), value(largeWrapContentTopBottomPadding), value(PrimaryBorderWidth)) 16px;
}

/*upgrade large mobile*/
.root:size(large):paddingMode(dynamicPaddings):priority(secondary):mobile, .root:size(large):paddingMode(dynamicPaddings):priority(basicSecondary):mobile{
  padding: calculate(string(-), value(largeMobileTopBottomPadding), value(secondaryBorderWidth)) 16px;
}

.root:paddingMode(dynamicPaddings):size(large):mobile, .root:priority(primary):paddingMode(dynamicPaddings):size(large):mobile, .root:priority(basic):paddingMode(dynamicPaddings):size(large):mobile{
  padding: calculate(string(-), value(largeMobileTopBottomPadding), value(secondaryBorderWidth)) 16px;
}

.root:size(large):paddingMode(dynamicPaddings):wrapContent:priority(secondary):mobile, .root:size(large):paddingMode(dynamicPaddings):wrapContent:priority(basicSecondary):mobile{
  padding: calculate(string(-), value(largeMobileWrapContentTopBottomPadding), value(secondaryBorderWidth)) 16px;
}

.root:paddingMode(dynamicPaddings):wrapContent:size(large):mobile, .root:priority(primary):paddingMode(dynamicPaddings):wrapContent:size(large):mobile, .root:priority(basic):paddingMode(dynamicPaddings):wrapContent:size(large):mobile{
  padding: calculate(string(-), value(largeMobileWrapContentTopBottomPadding), value(secondaryBorderWidth)) 16px;
}

.root .affixIcon svg:not([fill="currentColor"]) path {
  fill: none;
  transition: stroke .2s ease-in-out;
  stroke: value(PrimaryTextColor);
}

.root:hover .affixIcon svg:not([fill="currentColor"]) path {
  stroke: fallback(value(HoverTextColor), applyOpacity(value(PrimaryTextColor), 0.7));
}

.root:priority(secondary) .affixIcon svg:not([fill="currentColor"]) path {
  stroke: value(SecondaryTextColor);
}

.root:priority(secondary):hover .affixIcon svg:not([fill="currentColor"]) path {
  stroke: fallback(value(HoverTextColor), applyOpacity(value(SecondaryTextColor), 0.7));
}

.root:priority(basicSecondary) .affixIcon svg:not([fill="currentColor"]) path {
  stroke: value(BasicSecondaryTextColor);
}

.root:priority(basicSecondary):hover .affixIcon svg:not([fill="currentColor"]) path {
  stroke: fallback(value(HoverTextColor), applyOpacity(value(BasicSecondaryTextColor), 0.7));
}

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

.prefix-icon::after, .suffix-icon::before {
  content: '';
  width: 4px;
  height: 1px;
  display: inline-block;
}

/* ---------- new icons ------------*/

.root .affixIcon svg[fill="currentColor"] {
  transition: color .2s ease-in-out;
  color: value(PrimaryTextColor);
}

.root:hover .affixIcon svg[fill="currentColor"] {
  color: fallback(value(HoverTextColor), applyOpacity(value(PrimaryTextColor), 0.7));
}

.root:priority(secondary) .affixIcon svg[fill="currentColor"] {
  color: value(SecondaryTextColor);
}

.root:priority(secondary):hover .affixIcon svg[fill="currentColor"] {
  color: fallback(value(HoverTextColor), applyOpacity(value(SecondaryTextColor), 0.7));
}

.root:priority(basicSecondary) .affixIcon svg[fill="currentColor"] {
  color: value(BasicSecondaryTextColor);
}

.root:priority(basicSecondary):hover .affixIcon svg[fill="currentColor"] {
  color: fallback(value(HoverTextColor), applyOpacity(value(BasicSecondaryTextColor), 0.7));
}

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