.segmented-toggle-button {
  padding: var(--wds-segmented-toggle-padding-vertical-medium, var(--wds-space-200)) var(--wds-segmented-toggle-padding-horizontal-medium, var(--wds-space-400));

  &--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));
  }

  &:focus-visible {
    border-radius: var(--wds-segmented-toggle-border-radius-medium, var(--wds-border-radius-400));
  }

  &--size-small:focus-visible {
    border-radius: var(--wds-segmented-toggle-border-radius-small, var(--wds-border-radius-400));
  }

  &--size-tiny:focus-visible {
    border-radius: var(--wds-segmented-toggle-border-radius-small, var(--wds-border-radius-400));
  }

  &#{&}--size-small &__label,
  &#{&}--size-tiny &__label {
    font-size: var(--wds-segmented-toggle-label-font-size-small, var(--wds-font-size-body-tiny));
    line-height: var(--wds-segmented-toggle-label-font-line-height-small, var(--wds-font-line-height-body-tiny));
  }

  &#{&}--size-medium &__label {
    font-size: var(--wds-segmented-toggle-label-font-size-medium, var(--wds-font-size-body-small));
  }

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

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

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