.segmentedControl {
  display: inline-flex;
  gap: var(--gap--xxs);
  align-items: stretch;

  padding: var(--padding--xxs);

  background-color: rgb(var(--background--neutral-low-default--light));
  border-radius: 0;
}

// Size variants — typography drives height; padding is explicit per size
.segmentedControl--lg {
  font-size: var(--fontSize--body-large);
  line-height: var(--lineHeight--body-large);

  .segmentedControl__segment {
    // 10px = --padding--md (12) - --tweak--2000 (2)
    // 14px = --padding--lg (16) - --tweak--2000 (2)
    padding: calc(var(--padding--md) - var(--tweak--2000)) calc(var(--padding--lg) - var(--tweak--2000));
  }

  &.segmentedControl--iconOnly {
    .segmentedControl__segment {
      // 10px all sides: icon 24px + 2×10px = 44px square
      padding: calc(var(--padding--md) - var(--tweak--2000));
    }
  }
}

.segmentedControl--md {
  font-size: var(--fontSize--body-medium);
  line-height: var(--lineHeight--body-medium);

  .segmentedControl__segment {
    // 2px = --padding--xs (4) - --tweak--2000 (2)
    padding: calc(var(--padding--xs) - var(--tweak--2000)) var(--padding--md);
  }

  &.segmentedControl--iconOnly {
    .segmentedControl__segment {
      // 2px all sides: icon 24px + 2×2px = 28px square
      padding: calc(var(--padding--xs) - var(--tweak--2000));
    }
  }
}

.segmentedControl--sm {
  font-size: var(--fontSize--body-medium);
  line-height: var(--lineHeight--body-medium);

  .segmentedControl__segment {
    // 2px = --padding--xs (4) - --tweak--2000 (2)
    // 10px = --padding--md (12) - --tweak--2000 (2)
    padding: calc(var(--padding--xs) - var(--tweak--2000)) calc(var(--padding--md) - var(--tweak--2000));
  }
}

// ---- Segment ----

.segmentedControl__segment {
  cursor: pointer;
  user-select: none;

  position: relative;

  display: inline-flex;
  gap: var(--gap--xs);
  align-items: center;
  justify-content: center;

  color: rgb(var(--foreground--neutral-full-default--light));
  white-space: nowrap;

  background-color: transparent;
  border-radius: 0;

  // Hide the native radio input visually while keeping it keyboard-accessible
  .segmentedControl__segment-input {
    position: absolute;

    overflow: hidden;

    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;

    white-space: nowrap;

    opacity: 0;
    clip-path: inset(50%);
    border: 0;
  }

  // Focus-visible ring delegated from the hidden input via :focus-within
  &:focus-within {
    outline: none;
    box-shadow: var(--shadow--focus--light);
  }
}

// Hover state — subtle lightening of the surface
.segmentedControl__segment:not(.segmentedControl__segment--selected):not(.segmentedControl__segment--disabled):hover {
  background-color: rgb(var(--background--neutral-low-hovered--light));
}

// Activated / selected state — white card fill + semi-bold label (text only, not icon)
.segmentedControl__segment--selected {
  cursor: default;
  background-color: rgb(var(--background--neutral-base-default--light));
}

// Disabled state
.segmentedControl__segment--disabled {
  cursor: not-allowed;
  color: rgb(var(--foreground--neutral-high-default--light));
  opacity: 0.5;
}

// ---- iconOnly mode: square segments ----

.segmentedControl--iconOnly {
  .segmentedControl__segment {
    aspect-ratio: 1;
    padding: 0;
  }
}

// ---- Content slots ----

.segmentedControl__segment-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: var(--size-xl);
  height: var(--size-xl);
}


.segmentedControl__segment-suffix {
  display: inline-flex;
  align-items: center;
}