.button.hasIcon.small {
  padding: 0 0.3125rem;
}
.button.hasIcon.small .bg {
  width: 2.25rem;
}
.button.hasIcon.large {
  padding: 0 0.375rem;
}
.button.hasIcon.large .bg {
  width: 3rem;
}
.button.hasIcon.iconAfter .bg {
  left: auto;
  right: 0;
}
:global(.enact-locale-right-to-left) .button.hasIcon.iconAfter .bg {
  left: 0;
  right: auto;
}
.button.hasIcon.iconAfter .icon {
  margin-left: 1.125rem;
  margin-right: 0;
}
:global(.enact-locale-right-to-left) .button.hasIcon.iconAfter .icon {
  margin-left: 0;
  margin-right: 1.125rem;
}
.button.hasIcon.iconBefore .icon {
  margin-left: 0;
  margin-right: 1.125rem;
}
:global(.enact-locale-right-to-left) .button.hasIcon.iconBefore .icon {
  margin-left: 1.125rem;
  margin-right: 0;
}
.button.hasIcon:global(.neutral) .client :not(.icon) {
  color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
:global(.enact-a11y-high-contrast) .button.hasIcon:global(.neutral):global(.highContrast) .client :not(.icon) {
  color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
.button.hasIcon:global(.light) .client :not(.icon) {
  color: rgb(var(--sand-text-color-rgb, 46, 50, 57));
}
.button.hasIcon:global(.game) .client :not(.icon) {
  color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
:global(.green) .button.hasIcon:global(.game) .client :not(.icon) {
  color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
:global(.orange) .button.hasIcon:global(.game) .client :not(.icon) {
  color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}