@use 'sprucecss/scss/spruce' as *;

.form-size-option {
  @include layout-stack('xs');

  &__label {
    font-family: config('font-family', $form-label, false);
    font-size: config('font-size', $form-label, false);
    font-weight: config('font-weight', $form-label, false);
  }

  &__inner {
    display: flex;
    flex-wrap: wrap;
    gap: spacer('s');
  }
}

.form-size {
  $this: &;
  display: flex;

  &__control {
    @include visually-hidden;

    &:checked + #{$this}__label {
      background-color: color('primary-background', 'btn');
      border-color: color('primary-background', 'btn');
      box-shadow: none;
      color: color('primary-foreground', 'btn');
    }

    &:focus-visible + #{$this}__label {
      @include short-ring('button', 'primary');
    }

    &:disabled + #{$this}__label {
      opacity: 50%;
    }
  }

  &__label {
    background-color: color('background', 'form');
    border: 1px solid color('border');
    border-radius: config('border-radius', $btn, false);
    color: color('label', 'form');
    display: flex;
    font-size: config('font-size-sm', $typography, false);
    font-weight: 700;
    justify-content: center;
    min-inline-size: 2.75rem;
    padding: spacer('xs');
  }
}

<fieldset
    class="form-size-option"
    x-data="{ selected: 'M' }"
>
    <legend class="form-size-option__label">Size: <span class="form-size-option__selected" x-text="selected"></span></legend>
    <div class="form-size-option__inner">
        <label class="form-size">
            <input class="form-size__control" type="radio" value="xs" name="size" @change="selected = 'XS'"/>
            <span class="form-size__label">XS</span>
        </label>
        <label class="form-size">
            <input class="form-size__control" type="radio" value="s" name="size" disabled="disabled"/>
            <span class="form-size__label">S</span>
        </label>
        <label class="form-size">
            <input class="form-size__control" type="radio" value="m" name="size" @change="selected = 'M'" checked/>
            <span class="form-size__label">M</span>
        </label>
        <label class="form-size">
            <input class="form-size__control" type="radio" value="l" name="size" @change="selected = 'L'"/>
            <span class="form-size__label">L</span>
        </label>
        <label class="form-size">
            <input class="form-size__control" type="radio" value="xl" name="size" @change="selected = 'XL'"/>
            <span class="form-size__label">XL</span>
        </label>
        <label class="form-size">
            <input class="form-size__control" type="radio" value="xxl" name="size" @change="selected = 'XXL'"/>
            <span class="form-size__label">XXL</span>
        </label>
    </div>
</fieldset>