@use '../config/config'; // Use (need) only if this is a standalone file.
@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('secondary-background', 'btn');
      border-color: color('secondary-background', 'btn');
      box-shadow: none;
      color: color('secondary-foreground', 'btn');
    }

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

    &: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');
    font-size: config('font-size-sm', $typography, false);
    font-weight: 700;
    padding: spacer('xs') spacer('s');
  }
}

<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>