$formSwitchTransitionDuration: getCssVar(form-switch-transition-duration);

.form-switch {
  position: relative;
  pointer-events: auto;
  color: inherit;
  display: inline-flex;
  align-items: center;
  cursor: pointer;

  input {
    position: absolute;
    pointer-events: none;
    opacity: 0;
  }

  .form-slider {
    position: relative;
    cursor: pointer;
    display: inline-block;
    width: 3rem;
    min-width: 3rem;
    height: 1.75rem;
    background-color: var(getCssVar(form-switch-color));
    transition: background-color var($formSwitchTransitionDuration) ease;
    border-radius: 1rem;
    margin: 0 0.5rem;

    &::before {
      content: '';
      position: absolute;
      width: 1.25rem;
      min-width: 1.25rem;
      height: 1.25rem;
      left: 0.25rem;
      top: 0.25rem;
      border-radius: 50%;
      background-color: var(getCssVar(form-switch-btn-color));
      transition: left var($formSwitchTransitionDuration) ease;
      box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
    }

    &.form-slider-small {
      width: 2.5rem;
      min-width: 2.5rem;
      height: 1.5rem;

      &::before {
        width: 1rem;
        min-width: 1rem;
        height: 1rem;
      }
    }

    &.form-slider-large {
      width: 3.5rem;
      min-width: 3.5rem;
      height: 2rem;

      &::before {
        width: 1.5rem;
        min-width: 1.5rem;
        height: 1.5rem;
      }
    }

    &.form-slider-thin {
      height: 0.75rem;
      margin: 0.375rem 0.5rem;

      &::before {
        top: -0.25rem;
        left: -0.25rem;
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
      }

      &.form-slider-small {
        height: 0.5rem;
      }

      &.form-slider-large {
        height: 1rem;
      }
    }
  }

  input:checked + .form-slider {
    background-color: var(getCssVar(form-switch-active-color));

    &::before {
      left: 50%;
    }

    &.form-slider-thin::before {
      left: 60%;
    }
  }

  input:disabled + .form-slider {
    background-color: var(getCssVar(form-disabled-bg-color));
    cursor: default;
  }
}

.form-field {
  .form-switch {
    font-weight: initial;
    margin-bottom: 0;
    display: inline-flex;
    align-self: flex-start;
  }
}