$selected-shadow:
  var(--wds-toggle-button-shadow-x-tertiary, 0.7px) var(--wds-toggle-button-shadow-y-tertiary, 0.7px) var(--wds-toggle-button-shadow-blur-tertiary, 0.8px) var(--wds-toggle-button-shadow-spread-tertiary, -0.75px) var(--wds-toggle-button-shadow-fill-tertiary, var(--wds-color-black-100-transparent-25)),
  var(--wds-toggle-button-shadow-x-secondary, 2px) var(--wds-toggle-button-shadow-y-secondary, 2px) var(--wds-toggle-button-shadow-blur-secondary, var(--wds-shadow-blur-25)) var(--wds-toggle-button-shadow-spread-secondary, -1.5px) var(--wds-toggle-button-shadow-fill-secondary, var(--wds-color-black-100-transparent-20)),
  var(--wds-toggle-button-shadow-x-primary, 1px) var(--wds-toggle-button-shadow-y-primary, 2px) var(--wds-toggle-button-shadow-blur-primary, var(--wds-shadow-blur-50)) 0 var(--wds-toggle-button-shadow-fill-primary, var(--wds-color-black-100-transparent-10)),
  var(--wds-toggle-button-inner-shadow-x-secondary, var(--wds-shadow-x-25)) var(--wds-toggle-button-inner-shadow-y-secondary, var(--wds-shadow-y-25)) var(--wds-toggle-button-inner-shadow-blur-secondary, 1px) 0 var(--wds-segmented-toggle-inner-shadow-fill-secondary, transparent) inset,
  var(--wds-toggle-button-inner-shadow-x-primary, var(--wds-shadow-x-25)) var(--wds-toggle-button-inner-shadow-y-primary, var(--wds-shadow-y-25)) var(--wds-toggle-button-inner-shadow-blur-primary, 1px) 0 var(--wds-segmented-toggle-inner-shadow-fill-primary, transparent) inset;

.segmented-toggle {
  background: var(--wds-segmented-toggle-fill, var(--wds-color-black-750));
  border: var(--wds-segmented-toggle-border-width, var(--wds-border-width-0)) solid var(--wds-segmented-toggle-border-color, var(--wds-color-black-100-transparent-0));
  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-1000)) - var(--wds-segmented-toggle-border-width, var(--wds-border-width-0)) * 2);
  padding: var(--wds-segmented-toggle-padding-container, var(--wds-space-100));

  &--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-750)) - var(--wds-segmented-toggle-border-width, var(--wds-border-width-0)) * 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-550)) - var(--wds-segmented-toggle-border-width, var(--wds-border-width-0)) * 2);
  }

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

  &__item {
    background-color: var(--wds-segmented-toggle-fill, var(--wds-color-black-750));
    border: var(--wds-segmented-toggle-border-width-selected, var(--wds-border-width-0)) solid transparent;
    border-radius: calc(var(--wds-segmented-toggle-border-radius-medium, var(--wds-border-radius-300)) - var(--wds-segmented-toggle-border-width, var(--wds-border-width-0)));

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

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

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

    &--selected:not(:disabled) {
      color: var(--wds-segmented-toggle-value-fill-selected, var(--wds-color-text-primary));
      box-shadow: $selected-shadow;
      border: var(--wds-segmented-toggle-border-width-selected, var(--wds-border-width-0)) solid var(--wds-segmented-toggle-border-color-selected, var(--wds-color-black-100-transparent-0));
    }

    &--selected:disabled {
      background-color: var(--wds-segmented-toggle-fill-selected-disabled, var(--wds-color-fill-standard-tertiary-disabled));
      border: var(--wds-segmented-toggle-border-width-default, var(--wds-border-width-0)) solid var(--wds-color-border-standard-secondary-disabled);
      box-shadow:
        0 calc(-1 * var(--wds-segmented-toggle-border-width-default, var(--wds-border-width-0))) 0 0 var(--wds-color-border-standard-secondary-disabled),
        var(--wds-segmented-toggle-border-width-default, var(--wds-border-width-0)) 0 0 0 var(--wds-color-border-standard-secondary-disabled),
        0 var(--wds-segmented-toggle-border-width-default, var(--wds-border-width-0)) 0 0 var(--wds-color-border-standard-secondary-disabled),
        calc(-1 * var(--wds-segmented-toggle-border-width-default, var(--wds-border-width-0))) 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-primary));
    }

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

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

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