.segmented-toggle-button {
  flex-basis: 100%;
  width: auto;
  box-sizing: border-box;
  overflow: hidden;
  padding: var(--wds-segmented-toggle-padding-vertical-medium, var(--wds-space-100, 6px)) var(--wds-segmented-toggle-padding-horizontal-medium, var(--wds-space-400, 24px));

  &--size-small {
    padding: var(--wds-segmented-toggle-padding-vertical-small, var(--wds-space-100, 6px)) var(--wds-segmented-toggle-padding-horizontal-small, var(--wds-space-200, 24px));
  }

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

  &:focus-visible {
    border-radius: var(--wds-segmented-toggle-border-radius-medium, var(--wds-border-radius-300, 6px));
    z-index: 10;
  }

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

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

  &__label {
    color: var(--wds-segmented-toggle-value-fill-default, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)));
  }

  [data-hook='popover-element'] {
    font-size: var(--wds-segmented-toggle-label-font-size-small, var(--wds-font-size-body-small, 14px));
    line-height: var(--wds-segmented-toggle-label-font-line-height-small, var(--wds-font-line-height-body-small, 18px));
  }

  &#{&}#{&}--size-small &__label,
  &#{&}#{&}--size-tiny &__label {
    font-size: var(--wds-segmented-toggle-label-font-size-small, var(--wds-font-size-body-small, 14px));
    line-height: var(--wds-segmented-toggle-label-font-line-height-small, var(--wds-font-line-height-body-small, 18px));
    font-weight: var(--wds-segmented-toggle-label-font-weight, var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400)));
  }

  &#{&}#{&}--size-medium &__label {
    font-size: var(--wds-segmented-toggle-label-font-size-medium, var(--wds-font-size-body-medium, 16px));
    line-height: var(--wds-segmented-toggle-label-font-line-height-medium, var(--wds-font-line-height-300, 24px));
    font-weight: var(--wds-segmented-toggle-label-font-weight, var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400)));
  }

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

  &#{&}--disabled &__label {
    color: var(--wds-segmented-toggle-value-fill-disabled, var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))));
  }

  &--selected#{&}--disabled &__label {
    color: var(--wds-segmented-toggle-value-fill-selected-disabled, var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))));
  }

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

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

  &__prefix {
    flex-shrink: 0;
    margin: 0 var(--wds-space-100, 6px) 0 calc(var(--wds-space-100, 6px) * -1);
  }

  &--size-small &__prefix,
  &--size-tiny &__prefix {
    margin-left: 0;
  }

  :global([dir='rtl']) &__prefix {
    flex-shrink: 0;
    margin: 0 calc(var(--wds-space-100, 6px) * -1) 0 var(--wds-space-100, 6px);
  }
}