.segmented-toggle-button {
  &--size-small {
    padding: var(--wds-segmented-toggle-padding-vertical-small, var(--wds-space-100)) var(--wds-segmented-toggle-padding-horizontal-small, var(--wds-space-300));
  }

  &--size-tiny {
    padding: var(--wds-segmented-toggle-padding-vertical-small, var(--wds-space-100)) var(--wds-segmented-toggle-padding-horizontal-small, var(--wds-space-300));
  }

  &#{&}--size-small &__label,
  &#{&}--size-tiny &__label {
    font-size: var(--wds-segmented-toggle-label-font-size-small, var(--wds-font-size-200));
    font-weight: var(--wds-segmented-toggle-label-font-weight, var(--wds-font-weight-semi-bold));
  }

  &#{&}--size-medium &__label {
    line-height: var(--wds-segmented-toggle-label-font-line-height-medium, var(--wds-font-line-height-400));
    font-weight: var(--wds-segmented-toggle-label-font-weight, var(--wds-font-weight-semi-bold));
  }

  &--selected:not(#{&}--disabled) &__label {
    color: var(--wds-segmented-toggle-value-fill-selected, var(--wds-color-text-primary));
  }

  @media (hover: hover) {
    &:not(#{&}--disabled):hover &__label {
      color: var(--wds-segmented-toggle-value-fill-hover, var(--wds-color-text-primary));
    }

    &--selected:not(#{&}--disabled):hover &__label {
      color: var(--wds-segmented-toggle-value-fill-selected, var(--wds-color-text-primary));
    }
  }
}