.form-switch {
  --switch-width: #{unit(10.25)};
  --switch-height: #{unit(5.25)};
  --switch-bg: white;
  --switch-radius: 12px;
  --switch-ball-width: #{unit(3.75)};
  --switch-ball-bg: var(--secondary-color);
  --switch-checked-ball-bg: white;
  --switch-border-color: var(--secondary-color);
  --switch-hover-border-color: var(--secondary-color-darker);
  --switch-checked-bg: var(--primary-color);
  --switch-disabled-bg: var(--secondary-color-lighter);
  --switch-disabled-checked-bg: var(--secondary-color-darker);

  position: relative;
  width: var(--switch-width);
  height: var(--switch-height);
  background: var(--switch-bg);
  border: 1px solid var(--switch-border-color);
  border-radius: var(--switch-radius);
  transition: 0.3s;
  appearance: none;
  margin: 0;
  cursor: pointer;

  &::before {
    @include circle(var(--switch-ball-width));
    position: absolute;
    top: unit(0.5);
    left: unit(0.5);
    content: "";
    background: var(--switch-ball-bg);
    transition: 0.3s;
  }

  & #{$sibling-selector} .form-check-label {
    margin-left: unit(2.5);
    cursor: pointer;
    transition: 0.3s;
  }

  &:hover {
    --switch-border-color: var(--switch-hover-border-color);
  }

  &:checked {
    --switch-bg: var(--switch-checked-bg);
    --switch-border-color: var(--switch-checked-bg);

    &::before {
      --switch-ball-bg: var(--switch-checked-ball-bg);
      transform: translateX(unit(5));
    }
  }

  &:disabled {
    --switch-bg: var(--switch-disabled-bg);
    --switch-checked-bg: var(--switch-disabled-checked-bg);

    cursor: not-allowed;

    & #{$sibling-selector} .form-check-label {
      cursor: not-allowed;
    }
  }
}
