$selected-shadow:
  var(--wds-toggle-button-shadow-x-tertiary, 0.4px) var(--wds-toggle-button-shadow-y-tertiary, 0.4px) var(--wds-toggle-button-shadow-blur-tertiary, 0.6px) var(--wds-toggle-button-shadow-spread-tertiary, 0px) var(--wds-toggle-button-shadow-fill-tertiary, var(--wds-color-blue-500)),
  var(--wds-toggle-button-shadow-x-secondary, 1.2px) var(--wds-toggle-button-shadow-y-secondary, 1.2px) var(--wds-toggle-button-shadow-blur-secondary, 1.7px) var(--wds-toggle-button-shadow-spread-secondary, 0px) var(--wds-toggle-button-shadow-fill-secondary, var(--wds-color-blue-600)),
  var(--wds-toggle-button-shadow-x-primary, 1px) var(--wds-toggle-button-shadow-y-primary, 4px) var(--wds-toggle-button-shadow-blur-primary, var(--wds-shadow-blur-75)) 0 var(--wds-toggle-button-shadow-fill-primary, var(--wds-color-black-100-transparent-0)),
  var(--wds-toggle-button-inner-shadow-x-secondary, 1px) var(--wds-toggle-button-inner-shadow-y-secondary, 1px) var(--wds-toggle-button-inner-shadow-blur-secondary, 1px) 0 var(--wds-segmented-toggle-inner-shadow-fill-secondary, var(--wds-color-white)) inset,
  var(--wds-toggle-button-inner-shadow-x-primary, 1px) var(--wds-toggle-button-inner-shadow-y-primary, 1px) var(--wds-toggle-button-inner-shadow-blur-primary, 1px) 0 var(--wds-segmented-toggle-inner-shadow-fill-primary, var(--wds-color-white)) 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));
  }
}