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

.text-button {
  color: var(--wds-color-fill-standard-primary, var(--wsr-color-B10, #116dff));
  white-space: nowrap;
  background-color: transparent;
  border-color: transparent;
  text-decoration: none;
  border: none;
  border-radius: 2px;
  transition-duration: 100ms;
  transition-timing-function: linear;
  transition-property: background-color, color, border-color;
  /* stylelint-disable-next-line plugin/use-baseline */
  outline: none;
  padding: 0;
  height: 24px;
  /* stylelint-disable-next-line plugin/use-baseline */
  user-select: none;
  font-family: chains.$font-family-default;
  letter-spacing: var(--wds-font-letter-spacing-0, unset);

  @media (hover: hover) {
    &:hover {
      color: var(
        --wds-color-fill-standard-primary-hover,
        var(--wsr-color-B20, #5999ff)
      );
    }
  }

  &:active {
    color: var(
      --wds-color-fill-standard-primary-active,
      var(--wsr-color-B20, #5999ff)
    );
  }

  &#{&}--disabled {
    color: var(
      --wds-color-fill-standard-primary-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
  }

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

  &--fluid,
  &--fluid .button-core__content {
    width: 100%;
  }

  &#{&}--wrap {
    display: inline;
    white-space: normal;
  }

  &--wrap .button-core__prefix,
  &--wrap .button-core__suffix {
    display: inline-block;
    vertical-align: bottom;
  }

  &#{&}--underline-on-hover:active {
    text-decoration: underline;
  }

  @media (hover: hover) {
    &#{&}--underline-on-hover:hover {
      text-decoration: underline;
    }
  }

  &#{&}--underline-on-hover#{&}--disabled {
    text-decoration: none;
  }

  &#{&}--underline-always,
  &#{&}--underline-always:active,
  &#{&}--underline-always#{&}--disabled {
    text-decoration: underline;
  }

  @media (hover: hover) {
    &#{&}--underline-always:hover {
      text-decoration: underline;
    }
  }

  &#{&}--skin-standard-light {
    color: var(--wds-color-fill-standard-light-primary, #80b1ff);
  }

  @media (hover: hover) {
    &#{&}--skin-standard-light:hover:not(#{&}--disabled) {
      color: var(
        --wds-color-fill-standard-light-primary-hover,
        var(--wsr-color-B20, #5999ff)
      );
    }
  }

  &#{&}--skin-standard-light:active {
    color: var(
      --wds-color-fill-standard-light-primary-active,
      var(--wsr-color-B20, #5999ff)
    );
  }

  &#{&}--skin-standard-light#{&}--disabled {
    color: var(
      --wds-color-fill-standard-light-primary-disabled,
      rgba(255, 255, 255, 0.3)
    );
  }

  &#{&}--skin-premium {
    color: var(--wds-color-fill-premium-primary, var(--wsr-color-P10, #9a27d5));
  }

  @media (hover: hover) {
    &#{&}--skin-premium:hover:not(#{&}--disabled) {
      color: var(
        --wds-color-fill-premium-primary-hover,
        var(--wsr-color-P20, #c161f0)
      );
    }
  }

  &#{&}--skin-premium:active {
    color: var(
      --wds-color-fill-premium-primary-active,
      var(--wsr-color-P10, #9a27d5)
    );
  }

  &#{&}--skin-premium#{&}--disabled {
    color: var(
      --wds-color-fill-premium-primary-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
  }

  &#{&}--skin-destructive {
    color: var(
      --wds-color-fill-destructive-primary,
      var(--wsr-color-R10, #e62214)
    );
  }

  @media (hover: hover) {
    &#{&}--skin-destructive:hover:not(#{&}--disabled) {
      color: var(
        --wds-color-fill-destructive-primary-hover,
        var(--wsr-color-R20, #ff6d63)
      );
    }
  }

  &#{&}--skin-destructive:active {
    color: var(
      --wds-color-fill-destructive-primary-active,
      var(--wsr-color-R10, #e62214)
    );
  }

  &#{&}--skin-destructive#{&}--disabled {
    color: var(
      --wds-color-fill-destructive-primary-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
  }

  &#{&}--skin-light {
    color: var(--wds-color-fill-light-primary, var(--wsr-color-D80, #ffffff));
  }

  @media (hover: hover) {
    &#{&}--skin-light:hover:not(#{&}--disabled) {
      color: var(--wds-color-fill-light-primary, var(--wsr-color-D80, #ffffff));
    }
  }

  &#{&}--skin-light:active {
    color: var(--wds-color-fill-light-primary, var(--wsr-color-D80, #ffffff));
  }

  &#{&}--skin-light#{&}--disabled {
    color: var(
      --wds-color-fill-light-primary-disabled,
      var(--wsr-color-D80-70, rgba(255, 255, 255, 0.7))
    );
  }

  &#{&}--skin-dark {
    color: var(--wds-color-fill-dark-primary, var(--wsr-color-D10, #000624));
  }

  @media (hover: hover) {
    &#{&}--skin-dark:hover:not(#{&}--disabled) {
      color: var(
        --wds-color-fill-dark-primary-hover,
        var(--wsr-color-D20, #333853)
      );
    }
  }

  &#{&}--skin-dark:active {
    color: var(
      --wds-color-fill-dark-primary-active,
      var(--wsr-color-D10, #000624)
    );
  }

  &#{&}--skin-dark#{&}--disabled {
    color: var(
      --wds-color-fill-dark-primary-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
  }

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

  &--size-small {
    font-size: var(
      --wds-text-button-font-size-small,
      var(--wds-font-size-body-small, var(--wsr-text-font-size-small, 14px))
    );
    font-weight: var(
      --wds-text-button-font-weight-thin,
      var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400))
    );
    line-height: var(
      --wds-text-button-font-line-height-small,
      var(
        --wds-font-line-height-body-small,
        var(--wsr-text-line-height-small, 18px)
      )
    );
    height: var(--wds-text-button-size-small, var(--wds-space-300, 18px));
  }

  &--size-tiny {
    font-size: var(
      --wds-text-button-font-size-tiny,
      var(--wds-font-size-body-tiny, var(--wsr-text-font-size-tiny, 12px))
    );
    font-weight: var(
      --wds-text-button-font-weight-thin,
      var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400))
    );
    line-height: var(
      --wds-text-button-font-line-height-tiny,
      var(
        --wds-font-line-height-body-tiny,
        var(--wsr-text-line-height-tiny, 15px)
      )
    );
    height: var(--wds-text-button-size-tiny, var(--wds-space-300, 18px));
  }

  &--weight-normal {
    font-weight: var(
      --wds-text-button-font-weight-normal,
      var(--wds-font-weight-medium, var(--wsr-font-weight-medium, 530))
    );
  }

  &--weight-bold {
    font-weight: var(--wds-font-weight-bold, var(--wsr-font-weight-bold, 700));
  }

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

  & .button-core__suffix {
    box-sizing: content-box;
    padding-inline-start: var(
      --wds-button-gap-medium,
      var(--wds-space-100, 6px)
    );
    margin: 0;
    width: 24px;
    height: 24px;
  }

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

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

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

  &--size-tiny .button-core__suffix {
    width: 18px;
    height: 18px;
    padding-inline-start: var(--wds-button-gap-tiny, var(--wds-space-50, 3px));
  }
}