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

.form-color-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-color {
  $this: &;
  --size: 2.5rem;

  &--check-light {
    #{$this}__control:checked + #{$this}__label::before {
      @include field-icon(config('checkbox', $form-icon, false), white);
    }
  }

  &--check-dark {
    #{$this}__control:checked + #{$this}__label::before {
      @include field-icon(config('checkbox', $form-icon, false), black);
    }
  }

  &__control {
    @include visually-hidden;

    &:checked + #{$this}__label {
      box-shadow: none;

      &::before {
        --size: 1.5rem;
        background-size: var(--size);
        block-size: var(--size);
        content: '';
        inline-size: var(--size);
      }
    }

    &:focus-visible + #{$this}__label {
      @include focus-ring(
        $type: config('focus-ring-type', $btn, false),
        $ring-color: currentColor,
        $box-shadow-type: config('focus-ring-box-shadow-type', $btn, false),
        $ring-size: config('focus-ring-size', $btn, false),
        $ring-offset: config('focus-ring-offset', $btn, false)
      );
    }

    &:disabled + #{$this}__label {
      cursor: not-allowed;
      opacity: 25%;
    }
  }

  &__label {
    align-items: center;
    background-color: currentColor;
    block-size: var(--size);
    border-radius: 50%;
    display: inline-flex;
    inline-size: var(--size);
    justify-content: center;
  }
}

<fieldset
    class="form-color-option"
    x-data="{ selected: 'Teal' }"
>
    <legend class="form-color-option__label">Color: <span class="form-color-option__selected" x-text="selected"></span></legend>
    <div class="form-color-option__inner">
        <label class="form-color form-color--check-dark" style="color: pink;">
            <input class="form-color__control" type="radio" value="pink" name="color" @change="selected = 'Pink'" aria-label="Pink"/>
            <span class="form-color__label"></span>
        </label>
        <label class="form-color form-color--check-light" style="color: purple;">
            <input class="form-color__control" type="radio" value="purple" name="color" @change="selected = 'Purple'" aria-label="Purple"/>
            <span class="form-color__label"></span>
        </label>
        <label class="form-color form-color--check-light" style="color: teal;">
            <input class="form-color__control" type="radio" value="teal" name="color" @change="selected = 'Teal'" checked aria-label="Teal"/>
            <span class="form-color__label"></span>
        </label>
        <label class="form-color form-color--check-light" style="color: coral;">
            <input class="form-color__control" type="radio" value="coral" name="color" @change="selected = 'Coral'"/>
            <span class="form-color__label"></span>
        </label>
        <label class="form-color form-color--check-dark" style="color: lavender;">
            <input class="form-color__control" type="radio" value="lavender" name="color" @change="selected = 'Lavender'"/>
            <span class="form-color__label"></span>
        </label>
        <label class="form-color form-color--check-light" style="color: indianred;">
            <input class="form-color__control" type="radio" value="indianred" name="color" @change="selected = 'Indianred'"/>
            <span class="form-color__label"></span>
        </label>
    </div>
</fieldset>