@use '../../theme/styles' as theme;

.wr-segmented {
  --wr-segmented-bg: rgba(var(--wr-color-light-rgb), 0.4);
  --wr-segmented-color: var(--wr-color-dark);
  --wr-segmented-selected-bg: var(--wr-color-white);
  --wr-segmented-selected-color: var(--wr-color-dark);
  --wr-segmented-radius: 0.5rem; // 8px track
  // Concentric thumb: outer − inset, so track and thumb corners nest naturally.
  --wr-segmented-thumb-radius: calc(var(--wr-segmented-radius) - var(--wr-segmented-padding));
  --wr-segmented-padding: 0.1875rem;
  --wr-segmented-font-size: var(--wr-text-sm);
  --wr-segmented-line-height: var(--wr-control-line-height-md);
  --wr-segmented-option-py: 0.125rem;

  --wr-segmented-thumb-index: 0;
  --wr-segmented-thumb-count: 1;

  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
  background: var(--wr-segmented-bg);
  padding: var(--wr-segmented-padding);
  @include theme.smooth-br(var(--wr-segmented-radius));
  font-family: var(--wr-font-family-base);
  font-size: var(--wr-segmented-font-size);
  line-height: var(--wr-segmented-line-height);

  // Sizes — track 22 / 30 / 36 px (line-height + 2×option-py + 2×track-padding).
  &--sm {
    --wr-segmented-radius: 0.4375rem; // 7px → concentric 5px thumb
    --wr-segmented-padding: 0.125rem; // 2px
    --wr-segmented-font-size: var(--wr-text-xs);
    --wr-segmented-line-height: var(--wr-control-line-height-sm);
    --wr-segmented-option-py: 0.0625rem; // 1px
  }

  &--lg {
    --wr-segmented-radius: 0.5625rem; // 9px → concentric 6px thumb
    --wr-segmented-padding: 0.1875rem; // 3px
    --wr-segmented-font-size: var(--wr-text-base);
    --wr-segmented-line-height: var(--wr-control-line-height-lg);
    --wr-segmented-option-py: 0.1875rem; // 3px
  }

  &__thumb {
    position: absolute;
    top: var(--wr-segmented-padding);
    bottom: var(--wr-segmented-padding);
    left: var(--wr-segmented-padding);
    width: calc((100% - 2 * var(--wr-segmented-padding)) / var(--wr-segmented-thumb-count));
    transform: translateX(calc(100% * var(--wr-segmented-thumb-index)));
    background: var(--wr-segmented-selected-bg);
    @include theme.smooth-br(var(--wr-segmented-thumb-radius));
    box-shadow: var(--wr-shadow-xs);
    pointer-events: none;
    // Animate slides, but only after first paint — see `&--mounted` below.
  }

  &--mounted &__thumb {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  &--unselected &__thumb {
    opacity: 0;
  }

  &__option {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    appearance: none;
    background: transparent;
    border: 0;
    // Height = line-height + 2×option-py + 2×track-padding (md → 30px); all scale per size.
    padding: var(--wr-segmented-option-py) 0.75rem;
    @include theme.smooth-br(var(--wr-segmented-thumb-radius));
    color: var(--wr-segmented-color);
    font: inherit;
    cursor: pointer;
    transition: color var(--wr-transition-base);

    &:hover:not(:disabled):not(.wr-segmented__option--selected) {
      color: var(--wr-color-primary);
    }

    &--selected {
      color: var(--wr-segmented-selected-color);
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }

  &__icon {
    --wr-icon-size: 0.875rem;
  }

  &__label {
    line-height: var(--wr-segmented-line-height);
  }

  &--disabled {
    pointer-events: none;
    opacity: 0.6;
  }
}