/* -------------------------------------------- */
/* FORM SWITCH                                  */
/* -------------------------------------------- */
//
// Switch
//
.fm-switch {
   padding-left: $form-switch-padding-start;
   display: flex;
   align-items: center;

  .fm-label {
    cursor: pointer;
    margin-bottom: 0;
    margin-left: calc($form-switch-width / 3);
  }

  &.fm-sm {
    height: 0.5rem;
    min-height: 1rem;
    min-width: 2rem;
    width: 2rem;
  }

  .fm-checkbox {
    cursor: pointer;
    display: inline-flex;
    width: $form-switch-width;
    height: calc($form-switch-width / 2);
    margin-top: 0;
    margin-left: $form-switch-padding-start * -1;
    background-image: var(--#{$prefix}icon-switch);
    background-position: left center;
    @include border-radius($form-switch-border-radius);
    @include transition($form-switch-transition);

    &.is-invalid {
      border-color: $red;
    }

    &:focus {
      background-image: var(--icon-switch) !important;
    }

    &:focus:not(&:checked) {
      border-color: $gray-300;
    }

    &:checked {
      background-position: $form-switch-checked-bg-position;
      background-image: url(icon-square($form-switch-checked-color, calc($form-switch-width / 2))) !important;
    }
  }

  &.reverse {
    padding-right: $form-switch-padding-start;
    padding-left: 0;

    .fm-label {
      margin-right: calc($form-switch-width / 3);
    }

    .fm-checkbox {
      margin-right: $form-switch-padding-start * -1;
      margin-left: 0;
    }
  }
}