.SegmentedControl {
  --b-segmented-control-width: initial;
  --b-segmented-control-item-index: -1;
  --b-segmented-control-item-count: 0;
  --b-segmented-control-height: initial;
  --b-segmented-control-padding: initial;

  position: relative;
  z-index: var(--layer-z-index-base);

  display: flex;
  flex-direction: horizontal;

  box-sizing: border-box;
  width: var(--b-segmented-control-width);
  height: var(--b-segmented-control-height);
  padding: var(--b-segmented-control-padding);

  background-color: var(--color-fill-neutral-light);

  &:where(.size-xs) {
    --b-segmented-control-height: 24px;
    --b-segmented-control-padding: 1px;

    border-radius: var(--radius-6);

    & :where(.SegmentedControlItem, .SegmentedControlIndicator) {
      border-radius: 5px;
    }

    & :where(.SegmentedControlItem) {
      padding: 1px 0;
    }
  }

  &:where(.size-s) {
    --b-segmented-control-height: 28px;
    --b-segmented-control-padding: 2px;

    border-radius: var(--radius-8);

    & :where(.SegmentedControlItem, .SegmentedControlIndicator) {
      border-radius: 5px;
    }

    & :where(.SegmentedControlItem) {
      padding: 2px 0;
    }
  }

  &:where(.size-m) {
    --b-segmented-control-height: 36px;
    --b-segmented-control-padding: 2px;

    border-radius: var(--radius-8);

    & :where(.SegmentedControlItem, .SegmentedControlIndicator) {
      border-radius: var(--radius-6);
    }

    & :where(.SegmentedControlItem) {
      padding: 6px 0;
    }
  }

  &:where(.size-l) {
    --b-segmented-control-height: 44px;
    --b-segmented-control-padding: 4px;

    border-radius: var(--radius-12);

    & :where(.SegmentedControlItem, .SegmentedControlIndicator) {
      border-radius: var(--radius-8);
    }

    & :where(.SegmentedControlItem) {
      padding: 8px 0;
    }
  }

  &:where([data-disabled]) {
    opacity: var(--opacity-disabled);

    & :where(.SegmentedControlItem, .SegmentedControlIndicator) {
      cursor: not-allowed;
    }
  }
}

.SegmentedControlIndicator {
  position: absolute;
  top: 50%;
  left: var(--b-segmented-control-padding);
  transform: translateX(
      calc(
        (var(--b-segmented-control-item-index) * 100%) +
          var(--b-segmented-control-item-index) * var(--b-divider-thickness)
      )
    )
    translateY(-50%);

  width: calc(
    (
        100% -
          (
            (var(--b-segmented-control-item-count) - 1) *
              var(--b-divider-thickness)
          ) -
          (var(--b-segmented-control-padding) * 2)
      ) /
      var(--b-segmented-control-item-count)
  );
  height: calc(
    var(--b-segmented-control-height) - (var(--b-segmented-control-padding) * 2)
  );

  background-color: var(--color-fill-bright);
  box-shadow: var(--elevation-1);

  transition: transform var(--motion-transition-fast);
}

.SegmentedControlItem {
  position: relative;

  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;

  min-width: 0;

  outline: none;

  transition: background-color var(--motion-transition-fast);

  /* NOTE: Focus indicator */
  &::after {
    content: '';

    position: absolute;
    z-index: var(--layer-z-index-floating);
    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100%;

    border-radius: inherit;
    outline: none;

    transition: box-shadow var(--motion-transition-default);
  }

  &:where([data-checked]) {
    cursor: default;
    color: var(--color-text-neutral);
  }

  &:where(:not([data-checked])) {
    color: var(--color-text-neutral-lighter);
  }

  &:where(:disabled) {
    cursor: not-allowed;
  }

  &:where(:focus-visible) {
    &::after {
      box-shadow: var(--state-input-active);
    }
  }

  &:where(:not([data-checked], &:disabled):hover) {
    background-color: var(--color-fill-neutral-light);
  }
}

.SegmentedControlItemContainer {
  z-index: var(--layer-z-index-floating);
  overflow: hidden;
}

.SegmentedControlItemLabel {
  padding: 1px 0;
}

.SegmentedControlDivider {
  opacity: 1;
  transition: opacity var(--motion-transition-fast);

  &.hidden {
    opacity: 0;
  }
}