.segmented-toggle {
  background: var(--wds-segmented-toggle-fill, var(--wds-color-fill-standard-secondary));
  border: var(--wds-segmented-toggle-border-width, var(--wds-border-width-none)) solid var(--wds-segmented-toggle-border-color, var(--wds-color-border-standard-secondary));
  border-radius: var(--wds-segmented-toggle-container-border-radius-medium, var(--wds-border-radius-400));
  height: calc(var(--wds-segmented-toggle-size-medium, var(--wds-space-950)) - var(--wds-segmented-toggle-border-width, var(--wds-border-width-none)) * 2);

  &--size-small {
    border-radius: var(--wds-segmented-toggle-container-border-radius-small, var(--wds-border-radius-400));
    height: calc(var(--wds-segmented-toggle-size-small, var(--wds-space-800)) - var(--wds-segmented-toggle-border-width, var(--wds-border-width-none)) * 2);
  }

  &--size-tiny {
    border-radius: var(--wds-segmented-toggle-container-border-radius-small, var(--wds-border-radius-400));
    height: calc(var(--wds-segmented-toggle-size-tiny, var(--wds-space-400)) - var(--wds-segmented-toggle-border-width, var(--wds-border-width-none)) * 2);
  }

  &--disabled {
    border: var(--wds-segmented-toggle-border-width-default, var(--wds-border-width-none)) solid var(--wds-color-border-standard-secondary-disabled);
  }

  &__item {
    background-color: var(--wds-segmented-toggle-fill, var(--wds-color-fill-standard-secondary));
    border: var(--wds-segmented-toggle-border-width-selected, var(--wds-border-width-none)) solid transparent;
    border-radius: calc(var(--wds-segmented-toggle-border-radius-medium, var(--wds-border-radius-400)) - var(--wds-segmented-toggle-border-width, var(--wds-border-width-none)));

    &--size-tiny {
      border-radius: calc(var(--wds-segmented-toggle-border-radius-tiny, var(--wds-border-radius-300)) - var(--wds-segmented-toggle-border-width, var(--wds-border-width-none)));
    }

    &--size-small {
      border-radius: calc(var(--wds-segmented-toggle-border-radius-small, var(--wds-border-radius-400)) - var(--wds-segmented-toggle-border-width, var(--wds-border-width-none)));
    }

    &:disabled {
      background-color: var(--wds-segmented-toggle-fill-disabled, var(--wds-color-fill-standard-secondary-disabled));
    }

    &--selected:not(:disabled) {
      color: var(--wds-segmented-toggle-value-fill-selected, var(--wds-color-text-standard-primary-light));
      border: var(--wds-segmented-toggle-border-width-selected, var(--wds-border-width-none)) solid var(--wds-segmented-toggle-border-color-selected, var(--wds-color-border-standard-secondary-active));
    }

    &--selected:disabled {
      color: var(--wds-segmented-toggle-value-fill-selected-disabled, var(--wds-color-text-disabled-light));
      background-color: var(--wds-segmented-toggle-fill-selected-disabled, var(--wds-color-fill-standard-primary-disabled));
      border: var(--wds-segmented-toggle-border-width-default, var(--wds-border-width-none)) solid var(--wds-color-border-standard-secondary-disabled);
      box-shadow:
        0 calc(-1 * var(--wds-segmented-toggle-border-width-default, var(--wds-border-width-none))) 0 0 var(--wds-color-border-standard-secondary-disabled),
        var(--wds-segmented-toggle-border-width-default, var(--wds-border-width-none)) 0 0 0 var(--wds-color-border-standard-secondary-disabled),
        0 var(--wds-segmented-toggle-border-width-default, var(--wds-border-width-none)) 0 0 var(--wds-color-border-standard-secondary-disabled),
        calc(-1 * var(--wds-segmented-toggle-border-width-default, var(--wds-border-width-none))) 0 0 0 var(--wds-color-border-standard-secondary-disabled);
    }

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

    @media (hover: hover) {
      &:not(:disabled):hover {
        background-color: var(--wds-segmented-toggle-fill-hover, var(--wds-color-fill-standard-secondary-hover));
        box-shadow: 0 0 0 var(--wds-segmented-toggle-border-width, var(--wds-border-width-none)) var(--wds-segmented-toggle-border-hover, var(--wds-color-fill-standard-secondary-hover));
      }

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

  &__divider {
    width: var(--wds-segmented-toggle-border-width, var(--wds-border-width-none));
    min-width: var(--wds-segmented-toggle-border-width, var(--wds-border-width-none));
  }
}