@use 'Foundation/scss/typography-chains' as typography;

.button {
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  /* stylelint-disable-next-line plugin/use-baseline */
  outline: 1px solid;
  outline-offset: -1px;
  border: none;
  font-family: typography.$font-family-default;
  font-size: var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, 16px));
  font-weight: var(--wds-font-weight-medium, var(--wsr-font-weight-medium, 530));
  line-height: var(--wds-font-line-height-body-medium, var(--wsr-text-line-height-medium, 24px));
  letter-spacing: var(--wds-font-letter-spacing-0, unset);
  transition-duration: 100ms;
  transition-timing-function: linear;
  transition-property: background-color, color, border-color;
  height: var(--wds-button-size-medium, var(--wds-space-600, 36px));
  min-width: 84px;
  border-radius: var(--wds-button-border-radius-medium, var(--wds-border-radius-full, 18px));
  padding: var(--wds-button-padding-vertical-medium, var(--wds-space-100, 6px)) var(--wds-button-padding-horizontal-medium, var(--wds-space-400, 24px));
  background: var(--wds-button-fill-standard-primary, var(--wds-color-fill-standard-primary, var(--wsr-color-B10, #116DFF)));
  --wds-internal-button-border-color: transparent;
  outline-color: var(--wds-internal-button-border-color);
  color: var(--wds-button-label-fill-standard-primary, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
  text-decoration: none;
  /* stylelint-disable-next-line plugin/use-baseline */
  user-select: none;
  white-space: nowrap;

  & .button-core__content {
    display: flex;
    align-items: center;
  }

  @media (hover: hover) {
    &:hover {
      background: var(--wds-button-fill-standard-primary-hover, var(--wds-color-fill-standard-primary-hover, var(--wsr-color-B05, #0F62E6)));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-button-label-fill-standard-primary-hover, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
    }
  }

  &:active {
    background: var(--wds-button-fill-standard-primary-active, var(--wds-color-fill-standard-primary-active, var(--wsr-color-B00, #084EBD)));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-button-label-fill-standard-primary-active, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--disabled {
    background: var(--wds-button-fill-standard-primary-disabled, var(--wds-color-fill-standard-primary-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-button-label-fill-standard-primary-disabled, var(--wds-color-text-disabled-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &:focus-visible {
    position: relative;
    z-index: 1000;
  }

  &__ellipsis-tooltip:not(:disabled) {
    overflow: visible;
  }

  &#{&}--skin-standard#{&}--priority-secondary {
    background: var(--wds-button-fill-standard-secondary, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF)));
    --wds-internal-button-border-color: var(--wds-button-border-standard-secondary, var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #D6E6FE)));
    color: var(--wds-button-label-fill-standard-secondary, var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF)));
  }

  @media (hover: hover) {
    &#{&}--skin-standard#{&}--priority-secondary:hover {
      background: var(--wds-button-fill-standard-secondary-hover, var(--wds-color-fill-standard-primary, var(--wsr-color-B05, #0F62E6)));
      --wds-internal-button-border-color: var(--wds-button-border-standard-secondary-hover, var(--wds-color-border-standard-primary-active, transparent));
      color: var(--wds-button-label-fill-standard-secondary-hover, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
    }
  }

  &#{&}--skin-standard#{&}--priority-secondary:active {
    background: var(--wds-button-fill-standard-secondary-active, var(--wds-color-fill-standard-primary-active, var(--wsr-color-B00, #084EBD)));
    --wds-internal-button-border-color: var(--wds-button-border-standard-secondary-active, var(--wds-color-fill-standard-primary-active, transparent));
    color: var(--wds-button-label-fill-standard-secondary-active, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--skin-standard#{&}--priority-secondary#{&}--disabled {
    background: var(--wds-button-fill-standard-secondary-disabled, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF)));
    --wds-internal-button-border-color: var(--wds-button-border-standard-secondary-disabled, var(--wds-color-border-standard-secondary-disabled, var(--wsr-color-D10-10, rgba(0, 6, 36, 0.10))));
    color: var(--wds-button-label-fill-standard-secondary-disabled, var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
  }

  &#{&}--skin-standard#{&}--priority-tertiary {
    background: var(--wds-button-fill-standard-secondary, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF)));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-button-label-fill-standard-secondary, var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF)));
  }

  @media (hover: hover) {
    &#{&}--skin-standard#{&}--priority-tertiary:hover {
      background: var(--wds-button-fill-standard-secondary-hover, var(--wds-color-fill-standard-primary, var(--wsr-color-B05, #0F62E6)));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-button-label-fill-standard-secondary-hover, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
    }
  }

  &#{&}--skin-standard#{&}--priority-tertiary:active {
    background: var(--wds-button-fill-standard-secondary-active, var(--wds-color-fill-standard-primary-active, var(--wsr-color-B00, #084EBD)));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-button-label-fill-standard-secondary-active, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--skin-standard#{&}--priority-tertiary#{&}--disabled {
    background: var(--wds-button-fill-standard-secondary-disabled, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF)));
    --wds-internal-button-border-color: var(--wds-button-border-standard-secondary-disabled, var(--wds-color-border-standard-secondary-disabled, var(--wsr-color-D10-10, rgba(0, 6, 36, 0.10))));
    color: var(--wds-button-label-fill-standard-secondary-disabled, var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
  }

  &#{&}--skin-inverted {
    background: var(--wds-button-fill-standard-secondary, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF)));
    --wds-internal-button-border-color: var(--wds-button-border-standard-secondary, var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #D6E6FE)));
    color: var(--wds-button-label-fill-standard-secondary, var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF)));
  }

  @media (hover: hover) {
    &#{&}--skin-inverted:hover {
      background: var(--wds-button-fill-standard-secondary-hover, var(--wds-color-fill-standard-primary, var(--wsr-color-B05, #0F62E6)));
      --wds-internal-button-border-color: var(--wds-button-border-standard-secondary-hover, var(--wds-color-border-standard-primary-active, transparent));
      color: var(--wds-button-label-fill-standard-secondary-hover, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
    }
  }

  &#{&}--skin-inverted:active {
    background: var(--wds-button-fill-standard-secondary-active, var(--wds-color-fill-standard-primary-active, var(--wsr-color-B00, #084EBD)));
    --wds-internal-button-border-color: var(--wds-button-border-standard-secondary-active, var(--wds-color-fill-standard-primary-active, transparent));
    color: var(--wds-button-label-fill-standard-secondary-active, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--skin-inverted#{&}--disabled {
    background: var(--wds-button-fill-standard-secondary-disabled, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF)));
    --wds-internal-button-border-color: var(--wds-button-border-standard-secondary-disabled, var(--wds-color-border-standard-secondary-disabled, var(--wsr-color-D10-10, rgba(0, 6, 36, 0.10))));
    color: var(--wds-button-label-fill-standard-secondary-disabled, var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
  }

  &#{&}--skin-destructive#{&}--priority-tertiary {
    background: var(--wds-button-fill-destructive-secondary, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF)));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-button-label-fill-destructive-secondary, var(--wds-color-text-destructive, var(--wsr-color-R10, #E62214)));
  }

  @media (hover: hover) {
    &#{&}--skin-destructive#{&}--priority-tertiary:hover {
      background: var(--wds-button-fill-destructive-secondary-hover, var(--wds-color-fill-destructive-primary-hover, var(--wsr-color-R05, #D0180B)));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-button-label-fill-destructive-secondary-hover, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
    }
  }

  &#{&}--skin-destructive#{&}--priority-tertiary:active {
    background: var(--wds-button-fill-destructive-secondary-active, var(--wds-color-fill-destructive-primary-active, var(--wsr-color-R00, #B81206)));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-button-label-fill-destructive-secondary-active, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--skin-destructive#{&}--priority-tertiary#{&}--disabled {
    background: var(--wds-button-fill-destructive-secondary-disabled, var(--wds-color-fill-destructive-tertiary-disabled, var(--wsr-color-D80, #FFFFFF)));
    --wds-internal-button-border-color: var(--wds-button-border-destructive-secondary-disabled, var(--wds-color-border-destructive-primary-disabled, var(--wsr-color-D10-10, rgba(0, 6, 36, 0.10))));
    color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)));
  }

  &#{&}--skin-light {
    background: var(--wds-color-fill-light-primary, var(--wsr-color-D80, #FFFFFF));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF));
  }

  @media (hover: hover) {
    &#{&}--skin-light:hover {
      background: var(--wds-color-fill-light-primary-hover, var(--wsr-color-B50, #E7F0FF));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF));
    }
  }

  &#{&}--skin-light:active {
    background: var(--wds-color-fill-light-primary-active, var(--wsr-color-B40, #D6E6FE));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF));
  }

  &#{&}--skin-light#{&}--disabled {
    background: var(--wds-color-fill-light-primary-disabled, var(--wsr-color-D80-30, rgba(255, 255, 255, 0.30)));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-disabled-light, var(--wsr-color-D80, #FFFFFF));
  }

  &#{&}--skin-light#{&}--priority-secondary {
    background: var(--wds-color-fill-light-secondary, transparent);
    --wds-internal-button-border-color: var(--wds-color-border-light, var(--wsr-color-D80-50, rgba(255, 255, 255, 0.50)));
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  @media (hover: hover) {
    &#{&}--skin-light#{&}--priority-secondary:hover {
      background: var(--wds-color-fill-light-secondary-hover, var(--wsr-color-B50, #E7F0FF));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF));
    }
  }

  &#{&}--skin-light#{&}--priority-secondary:active {
    background: var(--wds-color-fill-light-secondary-active, var(--wsr-color-B40, #D6E6FE));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF));
  }

  &#{&}--skin-light#{&}--priority-secondary#{&}--disabled {
    background: var(--wds-color-fill-light-secondary-disabled, transparent);
    --wds-internal-button-border-color: var(--wds-color-border-light-disabled, var(--wsr-color-D80-30, rgba(255, 255, 255, 0.30)));
    color: var(--wds-color-text-disabled-light, var(--wsr-color-D80-70, rgba(255, 255, 255, 0.70)));
  }

  &#{&}--skin-light#{&}--priority-tertiary {
    background: var(--wds-color-fill-light-secondary, transparent);
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  @media (hover: hover) {
    &#{&}--skin-light#{&}--priority-tertiary:hover {
      background: var(--wds-color-fill-light-secondary-hover, var(--wsr-color-B50, #E7F0FF));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF));
    }
  }

  &#{&}--skin-light#{&}--priority-tertiary:active {
    background: var(--wds-color-fill-light-secondary-active, var(--wsr-color-B40, #D6E6FE));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF));
  }

  &#{&}--skin-light#{&}--priority-tertiary#{&}--disabled {
    background: var(--wds-color-fill-light-secondary-disabled, transparent);
    --wds-internal-button-border-color: var(--wds-color-border-light-disabled, var(--wsr-color-D80-30, rgba(255, 255, 255, 0.30)));
    color: var(--wds-color-text-disabled-light, var(--wsr-color-D80-70, rgba(255, 255, 255, 0.70)));
  }

  &#{&}--skin-destructive {
    background: var(--wds-color-fill-destructive-primary, var(--wsr-color-R10, #E62214));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  @media (hover: hover) {
    &#{&}--skin-destructive:hover {
      background: var(--wds-color-fill-destructive-primary-hover, var(--wsr-color-R05, #D0180B));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
    }
  }

  &#{&}--skin-destructive:active {
    background: var(--wds-color-fill-destructive-primary-active, var(--wsr-color-R00, #B81206));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  &#{&}--skin-destructive#{&}--disabled {
    background: var(--wds-button-fill-destructive-primary-disabled, var(--wds-color-fill-destructive-primary-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-button-label-fill-standard-primary-disabled, var(--wds-color-text-disabled-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--skin-destructive#{&}--priority-secondary {
    background: var(--wds-button-fill-destructive-secondary, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF)));
    --wds-internal-button-border-color: var(--wds-button-border-destructive-secondary, var(--wds-color-border-destructive-secondary, var(--wsr-color-R40, #FBD0CD)));
    color: var(--wds-button-label-fill-destructive-secondary, var(--wds-color-text-destructive, var(--wsr-color-R10, #E62214)));
  }

  @media (hover: hover) {
    &#{&}--skin-destructive#{&}--priority-secondary:hover {
      background: var(--wds-button-fill-destructive-secondary-hover, var(--wds-color-fill-destructive-primary-hover, var(--wsr-color-R05, #D0180B)));
      --wds-internal-button-border-color: var(--wds-button-border-destructive-secondary-hover, var(--wds-color-border-destructive-secondary-active, transparent));
      color: var(--wds-button-label-fill-destructive-secondary-hover, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
    }
  }

  &#{&}--skin-destructive#{&}--priority-secondary:active {
    background: var(--wds-button-fill-destructive-secondary-active, var(--wds-color-fill-destructive-primary-active, var(--wsr-color-R00, #B81206)));
    --wds-internal-button-border-color: var(--wds-button-border-destructive-secondary-active, var(--wds-color-fill-destructive-primary-active, transparent));
    color: var(--wds-button-label-fill-destructive-secondary-active, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--skin-destructive#{&}--priority-secondary#{&}--disabled {
    background: var(--wds-button-fill-destructive-secondary-disabled, var(--wds-color-fill-destructive-tertiary-disabled, var(--wsr-color-D80, #FFFFFF)));
    --wds-internal-button-border-color: var(--wds-button-border-destructive-secondary-disabled, var(--wds-color-border-destructive-primary-disabled, var(--wsr-color-D10-10, rgba(0, 6, 36, 0.10))));
    color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)));
  }

  &#{&}--skin-premium {
    background: var(--wds-button-fill-premium-primary, var(--wds-color-fill-premium-primary, var(--wsr-color-P10, #9A27D5)));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-button-label-fill-premium-primary, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
  }

  @media (hover: hover) {
    &#{&}--skin-premium:hover {
      background: var(--wds-button-fill-premium-primary-hover, var(--wds-color-fill-premium-primary-hover, var(--wsr-color-P05, #8E1DD1)));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-button-label-fill-premium-primary, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
    }
  }

  &#{&}--skin-premium:active {
    background: var(--wds-button-fill-premium-primary-active, var(--wds-color-fill-premium-primary-active, var(--wsr-color-P00, #7416A5)));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-button-label-fill-premium-primary, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--skin-premium#{&}--disabled {
    background: var(--wds-button-fill-premium-primary-disabled, var(--wds-color-fill-premium-primary-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-button-label-fill-premium-primary-disabled, var(--wds-color-text-disabled-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--skin-premium#{&}--priority-secondary {
    background: var(--wds-button-fill-premium-secondary, var(--wds-color-fill-premium-tertiary, var(--wsr-color-D80, #FFFFFF)));
    --wds-internal-button-border-color: var(--wds-button-border-premium-secondary, var(--wds-color-border-premium-secondary, var(--wsr-color-P40, #E3C3F4)));
    color: var(--wds-button-label-fill-premium-secondary, var(--wds-color-text-premium, var(--wsr-color-P10, #9A27D5)));
  }

  @media (hover: hover) {
    &#{&}--skin-premium#{&}--priority-secondary:hover {
      background: var(--wds-button-fill-premium-secondary-hover, var(--wds-color-fill-premium-primary-hover, var(--wsr-color-P05, #8E1DD1)));
      --wds-internal-button-border-color: var(--wds-button-border-premium-secondary-hover, var(--wds-color-border-premium-primary-active, transparent));
      color: var(--wds-button-label-fill-premium-secondary-hover, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
    }
  }

  &#{&}--skin-premium#{&}--priority-secondary:active {
    background: var(--wds-button-fill-premium-secondary-active, var(--wds-color-fill-premium-primary-active, var(--wsr-color-P00, #7416A5)));
    --wds-internal-button-border-color: var(--wds-button-border-premium-secondary-active, var(--wds-color-fill-premium-primary-active, transparent));
    color: var(--wds-button-label-fill-premium-secondary-active, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--skin-premium#{&}--priority-secondary#{&}--disabled {
    background: var(--wds-button-fill-premium-secondary-disabled, var(--wds-color-fill-premium-tertiary-disabled, var(--wsr-color-D80, #FFFFFF)));
    --wds-internal-button-border-color: var(--wds-button-border-premium-secondary-disabled, var(--wds-color-border-premium-secondary-disabled, var(--wsr-color-D10-10, rgba(0, 6, 36, 0.10))));
    color: var(--wds-button-label-fill-premium-secondary-disabled, var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
  }

  &#{&}--skin-premium#{&}--priority-tertiary {
    background: var(--wds-button-fill-premium-secondary, var(--wds-color-fill-premium-tertiary, var(--wsr-color-D80, #FFFFFF)));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-button-label-fill-premium-secondary, var(--wds-color-text-premium, var(--wsr-color-P10, #9A27D5)));
  }

  @media (hover: hover) {
    &#{&}--skin-premium#{&}--priority-tertiary:hover {
      background: var(--wds-button-fill-premium-secondary-hover, var(--wds-color-fill-premium-primary-hover, var(--wsr-color-P05, #8E1DD1)));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-button-label-fill-premium-secondary-hover, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
    }
  }

  &#{&}--skin-premium#{&}--priority-tertiary:active {
    background: var(--wds-button-fill-premium-secondary-active, var(--wds-color-fill-premium-primary-active, var(--wsr-color-P00, #7416A5)));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-button-label-fill-premium-secondary-active, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--skin-premium#{&}--priority-tertiary#{&}--disabled {
    background: var(--wds-button-fill-premium-secondary-disabled, var(--wds-color-fill-premium-tertiary-disabled, var(--wsr-color-D80, #FFFFFF)));
    --wds-internal-button-border-color: var(--wds-button-border-premium-secondary-disabled, var(--wds-color-border-premium-secondary-disabled, var(--wsr-color-D10-10, rgba(0, 6, 36, 0.10))));
    color: var(--wds-button-label-fill-premium-secondary-disabled, var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
  }

  &#{&}--skin-premium-light {
    background: var(--wds-color-fill-premium-light-primary, var(--wsr-color-D80, #FFFFFF));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-premium, var(--wsr-color-P10, #9A27D5));
  }

  @media (hover: hover) {
    &#{&}--skin-premium-light:hover {
      background: var(--wds-color-fill-premium-light-primary-hover, var(--wsr-color-P50, #F1E0F9));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-color-text-premium, var(--wsr-color-P10, #9A27D5));
    }
  }

  &#{&}--skin-premium-light:active {
    background: var(--wds-color-fill-premium-light-primary-active, var(--wsr-color-P40, #E3C3F4));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-premium, var(--wsr-color-P10, #9A27D5));
  }

  &#{&}--skin-premium-light#{&}--disabled {
    background: var(--wds-color-fill-premium-light-primary-disabled, var(--wsr-color-D80-30, rgba(255, 255, 255, 0.30)));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  &#{&}--skin-premium-light#{&}--priority-secondary {
    background: var(--wds-color-fill-premium-light-secondary, transparent);
    --wds-internal-button-border-color: var(--wds-color-border-light, var(--wsr-color-D80-50, rgba(255, 255, 255, 0.50)));
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  @media (hover: hover) {
    &#{&}--skin-premium-light#{&}--priority-secondary:hover {
      background: var(--wds-color-fill-premium-light-secondary-hover, var(--wsr-color-P50, #F1E0F9));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-color-text-premium, var(--wsr-color-P10, #9A27D5));
    }
  }

  &#{&}--skin-premium-light#{&}--priority-secondary:active {
    background: var(--wds-color-fill-premium-light-secondary-active, var(--wsr-color-P40, #E3C3F4));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-premium, var(--wsr-color-P10, #9A27D5));
  }

  &#{&}--skin-premium-light#{&}--priority-secondary#{&}--disabled {
    background: var(--wds-color-fill-premium-light-secondary-disabled, transparent);
    --wds-internal-button-border-color: var(--wds-color-border-light-disabled, var(--wsr-color-D80-30, rgba(255, 255, 255, 0.30)));
    color: var(--wds-color-text-disabled-light, var(--wsr-color-D80-70, rgba(255, 255, 255, 0.70)));
  }

  &#{&}--skin-premium-light#{&}--priority-tertiary {
    background: var(--wds-color-fill-premium-light-secondary, transparent);
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  @media (hover: hover) {
    &#{&}--skin-premium-light#{&}--priority-tertiary:hover {
      background: var(--wds-color-fill-premium-light-secondary-hover, var(--wsr-color-P50, #F1E0F9));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-color-text-premium, var(--wsr-color-P10, #9A27D5));
    }
  }

  &#{&}--skin-premium-light#{&}--priority-tertiary:active {
    background: var(--wds-color-fill-premium-light-secondary-active, var(--wsr-color-P40, #E3C3F4));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-premium, var(--wsr-color-P10, #9A27D5));
  }

  &#{&}--skin-premium-light#{&}--priority-tertiary#{&}--disabled {
    background: var(--wds-color-fill-premium-light-secondary-disabled, transparent);
    --wds-internal-button-border-color: var(--wds-color-border-light-disabled, var(--wsr-color-D80-30, rgba(255, 255, 255, 0.30)));
    color: var(--wds-color-text-disabled-light, var(--wsr-color-D80-70, rgba(255, 255, 255, 0.70)));
  }

  &#{&}--skin-dark {
    background: var(--wds-color-fill-dark-primary, var(--wsr-color-D10, #000624));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  @media (hover: hover) {
    &#{&}--skin-dark:hover {
      background: var(--wds-color-fill-dark-primary-hover, var(--wsr-color-D20, #333853));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
    }
  }

  &#{&}--skin-dark:active {
    background: var(--wds-color-fill-dark-primary-active, var(--wsr-color-D10, #000624));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  &#{&}--skin-dark#{&}--disabled {
    background: var(--wds-button-fill-dark-primary-disabled, var(--wds-color-fill-dark-primary-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-button-label-fill-dark-primary-disabled, var(--wds-color-text-disabled-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--skin-dark#{&}--priority-secondary {
    background: transparent;
    --wds-internal-button-border-color: var(--wds-button-border-dark-secondary, var(--wds-color-border-dark-primary, var(--wsr-color-D40, #868AA5)));
    color: var(--wds-button-label-fill-dark-secondary, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)));
  }

  @media (hover: hover) {
    &#{&}--skin-dark#{&}--priority-secondary:hover {
      background: var(--wds-button-fill-dark-secondary-hover, var(--wds-color-fill-dark-primary-hover, var(--wsr-color-D20, #333853)));
      --wds-internal-button-border-color: var(--wds-button-border-dark-secondary-hover, var(--wds-color-border-dark-primary-active, transparent));
      color: var(--wds-button-label-fill-dark-secondary-hover, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
    }
  }

  &#{&}--skin-dark#{&}--priority-secondary:active {
    background: var(--wds-button-fill-dark-secondary-active, var(--wds-color-fill-dark-primary, var(--wsr-color-D10, #000624)));
    --wds-internal-button-border-color: var(--wds-button-border-dark-secondary-active, var(--wds-color-fill-dark-primary, transparent));
    color: var(--wds-button-label-fill-dark-secondary-active, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--skin-dark#{&}--priority-secondary#{&}--disabled {
    background: var(--wds-button-fill-dark-secondary-disabled, var(--wds-color-fill-dark-tertiary-disabled, transparent));
    --wds-internal-button-border-color: var(--wds-button-border-dark-secondary-disabled, var(--wds-color-border-premium-secondary-disabled, var(--wsr-color-D10-10, rgba(0, 6, 36, 0.10))));
    color: var(--wds-button-label-fill-dark-secondary-disabled, var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
  }

  &#{&}--skin-dark#{&}--priority-tertiary {
    background: transparent;
    --wds-internal-button-border-color: transparent;
    color: var(--wds-button-label-fill-dark-secondary, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)));
  }

  @media (hover: hover) {
    &#{&}--skin-dark#{&}--priority-tertiary:hover {
      background: var(--wds-button-fill-dark-secondary-hover, var(--wds-color-fill-dark-primary-hover, var(--wsr-color-D20, #333853)));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-button-label-fill-dark-secondary-hover, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
    }
  }

  &#{&}--skin-dark#{&}--priority-tertiary:active {
    background: var(--wds-button-fill-dark-secondary-active, var(--wds-color-fill-dark-primary, var(--wsr-color-D10, #000624)));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-button-label-fill-dark-secondary-active, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--skin-dark#{&}--priority-tertiary#{&}--disabled {
    background: var(--wds-button-fill-dark-secondary-disabled, var(--wds-color-fill-dark-tertiary-disabled, transparent));
    --wds-internal-button-border-color: var(--wds-button-border-dark-secondary-disabled, var(--wds-color-border-premium-secondary-disabled, var(--wsr-color-D10-10, rgba(0, 6, 36, 0.10))));
    color: var(--wds-button-label-fill-dark-secondary-disabled, var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
  }

  &#{&}--skin-transparent {
    /* stylelint-disable-next-line plugin/use-baseline */
    background: var(--wds-color-fill-transparent-primary, color-mix(in srgb, var(--wsr-color-D20, #333853) 48%, transparent));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  @media (hover: hover) {
    &#{&}--skin-transparent:hover {
      background: var(--wds-color-fill-transparent-primary-hover, var(--wsr-color-D20-60, rgba(51, 56, 83, 0.60)));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
    }
  }

  &#{&}--skin-transparent:active {
    /* stylelint-disable-next-line plugin/use-baseline */
    background: var(--wds-color-fill-transparent-primary-active, color-mix(in srgb, var(--wsr-color-D20, #333853) 72%, transparent));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  &#{&}--skin-transparent#{&}--disabled {
    background: var(--wds-color-fill-transparent-primary-disabled, var(--wsr-color-D10-20, rgba(0, 6, 36, 0.20)));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-disabled-light, var(--wsr-color-D80-70, rgba(255, 255, 255, 0.70)));
  }

  &#{&}--skin-transparent#{&}--priority-secondary {
    background: var(--wds-color-fill-transparent-secondary, transparent);
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  @media (hover: hover) {
    &#{&}--skin-transparent#{&}--priority-secondary:hover {
      /* stylelint-disable-next-line plugin/use-baseline */
      background: var(--wds-color-fill-transparent-secondary-hover, color-mix(in srgb, var(--wsr-color-D20, #333853) 54%, transparent));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
    }
  }

  &#{&}--skin-transparent#{&}--priority-secondary:active {
    background: var(--wds-color-fill-transparent-secondary-active, var(--wsr-color-D20-60, rgba(51, 56, 83, 0.60)));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  &#{&}--skin-transparent#{&}--priority-secondary#{&}--disabled {
    background: var(--wds-color-fill-transparent-secondary-disabled, transparent);
    --wds-internal-button-border-color: var(--wds-color-border-dark-secondary-disabled, var(--wsr-color-D10-10, rgba(0, 6, 36, 0.10)));
    color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)));
  }

  &#{&}--skin-transparent#{&}--priority-tertiary {
    background: var(--wds-color-fill-transparent-secondary, transparent);
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  @media (hover: hover) {
    &#{&}--skin-transparent#{&}--priority-tertiary:hover {
      /* stylelint-disable-next-line plugin/use-baseline */
      background: var(--wds-color-fill-transparent-secondary-hover, color-mix(in srgb, var(--wsr-color-D20, #333853) 54%, transparent));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
    }
  }

  &#{&}--skin-transparent#{&}--priority-tertiary:active {
    background: var(--wds-color-fill-transparent-secondary-active, var(--wsr-color-D20-60, rgba(51, 56, 83, 0.60)));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  &#{&}--skin-transparent#{&}--priority-tertiary#{&}--disabled {
    background: var(--wds-color-fill-transparent-secondary-disabled, transparent);
    --wds-internal-button-border-color: transparent;
    color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)));
  }

  &#{&}--skin-ai {
    background: var(--wds-button-fill-ai-primary, var(--wds-color-fill-ai-primary, linear-gradient(60deg, #0021FF -31%, #116DFF 65%, #5FF2AE 96%)));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-button-label-fill-ai-primary, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
  }

  @media (hover: hover) {
    &#{&}--skin-ai:hover {
      background: var(--wds-button-fill-ai-primary-hover, var(--wds-color-fill-ai-primary-hover, linear-gradient(60deg, #0021FF -177%, #116DFF 32%, #5FF2AE 96%)));
    }
  }

  &#{&}--skin-ai:active {
    background: var(--wds-button-fill-ai-primary-active, var(--wds-color-fill-ai-primary-active, linear-gradient(60deg, #0021FF -31%, #116DFF 65%, #5FF2AE 96%)));
  }

  &#{&}--skin-ai#{&}--disabled {
    background: var(--wds-button-fill-ai-primary-disabled, var(--wds-color-fill-ai-primary-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-button-label-fill-ai-primary-disabled, var(--wds-color-text-disabled-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--skin-ai#{&}--priority-secondary {
    background: var(--wds-button-fill-ai-secondary, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF)));
    --wds-internal-button-border-color: var(--wds-button-border-ai-secondary, transparent);
    color: var(--wds-button-label-fill-ai-secondary, var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF)));
    position: relative;
    z-index: 0;
  }

  &#{&}--skin-ai#{&}--priority-secondary:not(:hover):not(:active):not(&--disabled)::after {
    content: '';
    z-index: -1;
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, white, white), var(--wds-color-border-ai-primary, linear-gradient(60deg, #0021FF -31%, #116DFF 65%, #5FF2AE 96%));
    border: 1px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    border-radius: inherit;
    display: var(--wds-button-border-ai-secondary-ring-display, block);
    /* stylelint-disable-next-line plugin/use-baseline */
    mask: var(--wds-button-border-ai-secondary-mask, none);
    /* stylelint-disable-next-line plugin/use-baseline */
    mask-composite: exclude;
  }

  @media (hover: hover) {
    &#{&}--skin-ai#{&}--priority-secondary:hover {
      background: var(--wds-button-fill-ai-secondary-hover, var(--wds-color-fill-ai-primary-hover, linear-gradient(60deg, #0021FF -177%, #116DFF 32%, #5FF2AE 96%)));
      --wds-internal-button-border-color: var(--wds-button-border-ai-secondary-hover, transparent);
      color: var(--wds-button-label-fill-ai-secondary-hover, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
    }
  }

  &#{&}--skin-ai#{&}--priority-secondary:active {
    background: var(--wds-button-fill-ai-secondary-active, var(--wds-color-fill-ai-primary-active, linear-gradient(60deg, #0021FF -31%, #116DFF 65%, #5FF2AE 96%)));
    --wds-internal-button-border-color: var(--wds-button-border-ai-secondary-active, transparent);
    color: var(--wds-button-label-fill-ai-secondary-active, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--skin-ai#{&}--priority-secondary#{&}--disabled {
    background: var(--wds-button-fill-ai-secondary-disabled, var(--wds-color-fill-standard-tertiary-disabled, var(--wsr-color-D80, #FFFFFF)));
    --wds-internal-button-border-color: var(--wds-button-border-ai-secondary-disabled, var(--wds-color-border-standard-secondary-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
    color: var(--wds-button-label-fill-ai-secondary-disabled, var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
  }

  &#{&}--skin-ai#{&}--priority-tertiary {
    background: var(--wds-button-fill-ai-tertiary, transparent);
    --wds-internal-button-border-color: transparent;
    color: var(--wds-button-label-fill-ai-tertiary, var(--wds-color-fill-ai-primary, var(--wsr-color-B10, #116DFF)));
  }

  @media (hover: hover) {
    &#{&}--skin-ai#{&}--priority-tertiary:hover {
      background: var(--wds-button-fill-ai-tertiary-hover, var(--wds-color-fill-ai-secondary-hover, var(--wsr-color-B05, #0F62E6)));
      --wds-internal-button-border-color: transparent;
      color: var(--wds-button-label-fill-ai-tertiary-hover, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
    }
  }

  &#{&}--skin-ai#{&}--priority-tertiary:active {
    background: var(--wds-button-fill-ai-tertiary-active, var(--wds-color-fill-ai-secondary-active, var(--wsr-color-B00, #084EBD)));
    --wds-internal-button-border-color: transparent;
    color: var(--wds-button-label-fill-ai-tertiary-active, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--skin-ai#{&}--priority-tertiary#{&}--disabled {
    background: var(--wds-button-fill-ai-tertiary-disabled, var(--wds-color-fill-ai-secondary-disabled, var(--wsr-color-D80, #FFFFFF)));
    --wds-internal-button-border-color: var(--wds-button-border-ai-tertiary-disabled, transparent);
    color: var(--wds-button-label-fill-ai-tertiary-disabled, var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
  }

  &#{&}--size-large {
    height: var(--wds-button-size-large, var(--wds-space-700, 42px));
    min-width: 102px;
    font-family: typography.$font-family-default;
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    line-height: var(--wds-button-font-line-height-large, var(--wds-font-line-height-body-medium, var(--wsr-text-line-height-medium, 24px)));
    font-size: var(--wds-button-font-size-large, var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, 16px)));
    font-weight: var(--wds-button-font-weight-large, var(--wds-font-weight-medium, var(--wsr-font-weight-medium, 530)));
    border-radius: var(--wds-button-border-radius-large, var(--wds-border-radius-full, 21px));
    padding: var(--wds-button-padding-vertical-large, var(--wds-space-150, 9px)) var(--wds-button-padding-horizontal-large, var(--wds-space-500, 30px));
  }

  &#{&}--size-medium {
    line-height: var(--wds-button-font-line-height-medium, var(--wds-font-line-height-body-medium, var(--wsr-text-line-height-medium, 24px)));
    font-size: var(--wds-button-font-size-medium, var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, 16px)));
    font-weight: var(--wds-button-font-weight-medium, var(--wds-font-weight-medium, var(--wsr-font-weight-medium, 530)));
  }

  &#{&}--size-small {
    height: var(--wds-button-size-small, var(--wds-space-500, 30px));
    min-width: 72px;
    font-family: typography.$font-family-default;
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    line-height: var(--wds-button-font-line-height-small, var(--wds-font-line-height-body-small, var(--wsr-text-line-height-small, 18px)));
    font-size: var(--wds-button-font-size-small, var(--wds-font-size-body-small, var(--wsr-text-font-size-small, 14px)));
    font-weight: var(--wds-button-font-weight-small, var(--wds-font-weight-medium, var(--wsr-font-weight-medium, 530)));
    border-radius: var(--wds-button-border-radius-small, var(--wds-border-radius-full, 15px));
    padding: var(--wds-button-padding-vertical-small, var(--wds-space-100, 6px)) var(--wds-button-padding-horizontal-small, var(--wds-space-300, 18px));
  }

  &#{&}--size-tiny {
    height: var(--wds-button-size-tiny, var(--wds-space-400, 24px));
    min-width: 60px;
    font-family: typography.$font-family-default;
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    line-height: var(--wds-button-font-line-height-tiny, var(--wds-font-line-height-body-tiny, 16px));
    font-size: var(--wds-button-font-size-tiny, var(--wds-font-size-body-tiny, var(--wsr-text-font-size-tiny, 12px)));
    font-weight: var(--wds-button-font-weight-tiny, var(--wds-font-weight-bold, var(--wsr-text-font-size-tiny, 700)));
    border-radius: var(--wds-button-border-radius-tiny, var(--wds-border-radius-full, 18px));
    padding: var(--wds-button-padding-vertical-tiny, var(--wds-space-50, 3px)) var(--wds-button-padding-horizontal-tiny, var(--wds-space-200, 12px));
  }

  &#{&}--fluid {
    width: 100%;
  }

  &#{&}--ellipsis {
    max-width: 100%;
  }

  &#{&}--size-tiny .button-core__suffix {
    margin: 0 -6px 0 var(--wds-button-gap-tiny, var(--wds-space-50, 3px));
    width: 18px;
    height: 18px;
  }

  &#{&}--size-tiny .button-core__prefix {
    margin: 0 var(--wds-button-gap-tiny, var(--wds-space-50, 3px)) 0 -6px;
    width: 18px;
    height: 18px;
  }

  &#{&}--size-small .button-core__suffix {
    margin: 0 -6px 0 var(--wds-button-gap-small, var(--wds-space-100, 6px));
    width: 18px;
    height: 18px;
  }

  &#{&}--size-small .button-core__prefix {
    margin: 0 var(--wds-button-gap-small, var(--wds-space-100, 6px)) 0 -6px;
    width: 18px;
    height: 18px;
  }

  & .button-core__suffix {
    margin: 0 -12px 0 var(--wds-button-gap-medium, var(--wds-space-100, 6px));
    width: 24px;
    height: 24px;
  }

  & .button-core__prefix {
    margin: 0 var(--wds-button-gap-medium, var(--wds-space-100, 6px)) 0 -12px;
    width: 24px;
    height: 24px;
  }

  &#{&}--size-large .button-core__suffix {
    margin: 0 -12px 0 var(--wds-button-gap-large, var(--wds-space-200, 12px));
    width: 24px;
    height: 24px;
  }

  &#{&}--size-large .button-core__prefix {
    margin: 0 var(--wds-button-gap-large, var(--wds-space-200, 12px)) 0 -12px;
    width: 24px;
    height: 24px;
  }

  :global([dir="rtl"]) &#{&}--size-large .button-core__suffix {
    margin: 0 var(--wds-button-gap-large, var(--wds-space-200, 12px)) 0 -12px;
  }

  :global([dir="rtl"]) &#{&}--size-large .button-core__prefix {
    margin: 0 -12px 0 var(--wds-button-gap-large, var(--wds-space-200, 12px));
  }

  :global([dir="rtl"]) &#{&}--size-small .button-core__suffix {
    margin: 0 var(--wds-button-gap-small, var(--wds-space-100, 6px)) 0 -6px;
  }

  :global([dir="rtl"]) &#{&}--size-small .button-core__prefix {
    margin: 0 -6px 0 var(--wds-button-gap-small, var(--wds-space-100, 6px));
  }

  :global([dir="rtl"]) & .button-core__suffix {
    margin: 0 var(--wds-button-gap-medium, var(--wds-space-100, 12px)) 0 -12px;
  }

  :global([dir="rtl"]) & .button-core__prefix {
    margin: 0 -12px 0 var(--wds-button-gap-medium, var(--wds-space-100, 12px));
  }

  :global([dir="rtl"]) &#{&}--size-tiny .button-core__suffix {
    margin: 0 var(--wds-button-gap-tiny, var(--wds-space-50, 0px)) 0 -6px;
  }

  :global([dir="rtl"]) &#{&}--size-tiny .button-core__prefix {
    margin: 0 -6px 0 var(--wds-button-gap-tiny, var(--wds-space-50, 0px));
  }
}