$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));
      background-color: var(--wds-segmented-toggle-fill-selected, var(--wds-color-fill-standard-tertiary));
      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);
    }

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

  @container style(--wds-internal-theme: odeditor) {
    @supports (anchor-name: --wds-anchor) and (anchor-scope: --wds-anchor) and (position-anchor: --wds-anchor) and (top: anchor(top)) and (left: anchor(left)) and (width: anchor-size(width)) and (height: anchor-size(height)) {
      position: relative;
      anchor-scope: --wds-segmented-toggle-indicator;

      &::before {
        content: '';
        position: absolute;
        position-anchor: --wds-segmented-toggle-indicator;
        top: anchor(top);
        left: anchor(left);
        width: anchor-size(width);
        height: anchor-size(height);
        z-index: 0;
        box-sizing: border-box;
        pointer-events: none;
        opacity: 0;
        background-color: var(--wds-segmented-toggle-fill-selected, var(--wds-color-fill-standard-tertiary));
        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)));
        box-shadow: $selected-shadow;
        transition-property: top, left, width, height;
        transition-duration: 200ms;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      }

      &--size-small::before {
        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)));
      }

      &--size-tiny::before {
        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)));
      }

      &:has(.segmented-toggle__item--selected:not(:disabled))::before {
        opacity: 1;
      }

      & .segmented-toggle__item:not(:disabled) {
        background-color: transparent;
      }

      & .segmented-toggle__item--selected:not(:disabled) {
        anchor-name: --wds-segmented-toggle-indicator;
        background-color: transparent;
        box-shadow: none;
      }

      @media (hover: hover) {
        & .segmented-toggle__item:not(:disabled):hover {
          background-color: transparent;
        }

        & .segmented-toggle__item--selected:not(:disabled):hover {
          background-color: transparent;
          box-shadow: none;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        &::before {
          transition: none;
        }
      }
    }
  }
}