$font-weight-thin: var(
  --wds-text-button-font-weight-thin,
  var(--wds-font-weight-medium, var(--wsr-font-weight-regular, 400))
);
$font-weight-normal: var(
  --wds-text-button-font-weight-normal,
  var(--wds-font-weight-semi-bold, var(--wsr-font-weight-medium, 530))
);
$gap-tiny: var(--wds-button-gap-tiny, var(--wds-space-100, 3px));

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

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

  &--size-tiny {
    font-weight: $font-weight-thin;
    line-height: var(
      --wds-text-button-font-line-height-tiny,
      var(
        --wds-font-line-height-body-extra-tiny,
        var(--wsr-text-line-height-tiny, 15px)
      )
    );
  }

  &--weight-normal {
    font-weight: $font-weight-normal;
  }

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

  &--size-tiny .button-core__prefix {
    padding-right: $gap-tiny;
  }

  &--size-tiny .button-core__suffix {
    padding-inline-start: $gap-tiny;
  }
}