/* TODO aggiungere esempi di uso */
/* TODO valutare versione con label a sinistra (form-check-reverse) */

/*
Markup (same as bootstrap 5, plus the native `switch` attribute):

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" switch id="my-switch">
  <label class="form-label" for="my-switch">Enable notifications</label>
</div>

The `switch` attribute (WebKit only for now) makes the browser render a real
native switch control, which can be styled through the `::track` and `::thumb`
pseudo-elements. Where it is not supported (or where the attribute is missing),
the `appearance: none` fallback is applied, with the thumb drawn as a
background-image.
*/

.form-switch {

  --_switch-thumb-size: calc(var(--form-switch-height) - var(--form-switch-thumb-inset) * 2);

  /* annulla il layout con float di `.form-check` */
  display: flex;
  column-gap: var(--size-sm);
  align-items: center;
  padding-left: 0;

  .form-check-input {
    float: none;
    flex: none;
    width: var(--form-switch-width);
    height: var(--form-switch-height);
    margin: 0;
    appearance: none;
    cursor: pointer;
    background-color: var(--form-switch-background-color);
    background-image:
      radial-gradient(
        circle closest-side,
        var(--form-switch-cursor-background-color) 98%,
        transparent
      );
    background-repeat: no-repeat;
    background-position: var(--form-switch-thumb-inset) center;
    background-size: var(--_switch-thumb-size) var(--_switch-thumb-size);
    border: none;
    border-radius: var(--form-switch-height);

    /* annulla lo `scale` applicato a tutti i checkbox */
    scale: none;

    &:checked {
      background-color: var(--form-switch-checked-background-color);
      background-position: calc(100% - var(--form-switch-thumb-inset)) center;
    }

    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: var(--form-control-focus-outline-width) solid var(--form-control-focus-color);
      outline-offset: var(--form-control-focus-outline-offset);
    }
  }

  .form-label {
    padding-inline-start: 0 !important;
    cursor: pointer;
    user-select: none;
  }

  &:has(.form-check-input:disabled) {
    opacity: var(--form-control-disabled-opacity);

    .form-check-input, .form-label {
      cursor: not-allowed;
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .form-switch .form-check-input {
    @media screen and (prefers-reduced-motion: no-preference) {
      transition:
        background-color var(--form-switch-transition-duration) linear,
        background-position var(--form-switch-transition-duration) ease-in-out;
    }
  }
}

/* switch nativo: si lascia il rendering al browser e si interviene sui suoi pseudo-elementi */
/* stylelint-disable selector-pseudo-element-no-unknown */
@supports selector(input[switch]::thumb) {

  .form-switch .form-check-input[switch] {
    appearance: auto;
    background: none;
    border-radius: 0; /* gestito da ::track */

    &::track {
      background-color: var(--form-switch-background-color);
    }

    &::thumb {
      background-color: var(--form-switch-cursor-background-color);
    }

    &:checked::track {
      background-color: var(--form-switch-checked-background-color);
    }
  }
}
/* stylelint-enable selector-pseudo-element-no-unknown */