*,
::after,
::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.toggle-switch {
  position: relative;
  display: inline-block;

  &.small {
    width: 28px;
    height: 12px;
  }

  &.medium {
    width: 36px;
    height: 16px;
  }

  &.large {
    width: 44px;
    height: 20px;
  }
  @media screen and (prefers-reduced-motion: reduce) {
    .slider {
      transition: none;
    }
  }

  .slider {
    position: absolute;
    cursor: pointer;
    inset-block-start: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
    border-radius: 34px;
    background: $toggle-btn-off-bg;
  }
  @media screen and (prefers-reduced-motion: reduce) {
    .before {
      transition: none;
    }
  }

  .before {
    position: absolute;
    content: '';
    inset-inline-start: 0;
    inset-block-end: -2px;
    border: solid 1px $toggle-btn-off-bg;
    border-radius: 50%;
    box-shadow: 0 1px 1px 0 $toggle-btn-shadow;
    background-color: $app-secondary-btn;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover,
    &:focus {
      box-shadow: 0 0 4px 4px $toggle-btn-off-shadow;
    }
  }

  .slider.small {
    width: 28px;
    height: 12px;

    .before {
      width: 16px;
      height: 16px;

      fw-icon {
        transform: scale(0.375);

        &.checked {
          transform: scale(0.5);
        }
      }
    }
  }

  .slider.medium {
    width: 36px;
    height: 16px;

    .before {
      width: 20px;
      height: 20px;

      fw-icon {
        transform: scale(0.5);

        &.checked {
          transform: scale(0.66);
        }
      }
    }
  }

  .slider.large {
    width: 44px;
    height: 20px;

    .before {
      width: 24px;
      height: 24px;

      fw-icon {
        transform: scale(0.66);

        &.checked {
          transform: scale(0.83);
        }
      }
    }
  }

  input {
    display: none;
  }

  input:checked + .slider {
    background-color: $toggle-btn-on-bg;

    .before {
      border: solid 1px $toggle-btn-on-bg;

      &:hover,
      &:focus {
        box-shadow: 0 0 4px 4px $toggle-btn-on-shadow;
      }
    }
  }

  input:checked + .slider.small {
    .before {
      -webkit-transform: translateX(12px);
      -ms-transform: translateX(12px);
      transform: translateX(12px);
    }
  }

  input:checked + .slider.medium {
    .before {
      -webkit-transform: translateX(16px);
      -ms-transform: translateX(16px);
      transform: translateX(16px);
    }
  }

  input:checked + .slider.large {
    .before {
      -webkit-transform: translateX(20px);
      -ms-transform: translateX(20px);
      transform: translateX(20px);
    }
  }

  input:disabled + .slider {
    opacity: 0.4;
    cursor: not-allowed;
  }
}
