// SWITCH
// /* The switch - the box around the slider */
.switch-container {
  display: inline-block;
  height: 20px;
  margin-bottom: -5px;
  position: relative;
  width: 40px;

  // /* Hide default HTML checkbox */
  input {
    left: -9999px;
    position: absolute;
  }

  // /* The slider */
  .slider {
    background-color: $switch-false-background-color;
    border: 1px solid $switch-false-border-color;
    border-radius: 34px;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: 0.2s;
  }

  .slider::before {
    background-color: $switch-false-circle-color;
    border-radius: 50%;
    bottom: 2px;
    content: "";
    height: 14px;
    left: 3px;
    position: absolute;
    transition: 0.2s;
    width: 14px;
  }

  .slider::after {
    background: url($base-icon-path + 'cross-gray.svg') no-repeat center center;
    background-size: 23px;
    bottom: 1px;
    color: $switch-false-circle-color;
    content: "";
    height: 14px;
    position: absolute;
    right: 3px;
    width: 14px;
  }


  input:checked + .slider,
  input:checked + input[type=hidden] + .slider {
    background-color: $switch-true-background-color;
    border-color: $switch-true-border-color;
  }

  input:focus + .slider,
  input:focus + input[type=hidden] + .slider {
    box-shadow: $outline-box-shadow rgba($checkbox-border-color, $outline-border-opacity);
    outline: 0;
  }

  input:checked + .slider::before,
  input:checked + input[type=hidden] + .slider::before {
    background-color: $switch-true-circle-color;
    transform: translateX(18px);
  }

  input:checked + .slider::after,
  input:checked + input[type=hidden] + .slider::after {
    background: url($base-icon-path + 'check-mark.svg') no-repeat center center;
    background-size: 16px;
    bottom: 2px;
    color: $switch-false-circle-color;
    content: "";
    height: 14px;
    left: 4px;
    position: absolute;
    width: 14px;
  }

  + label {
    cursor: pointer;
    font-size: $checkbox-radio-switch-font-size;
    font-weight: $font-weight-normal;
    margin-bottom: 0;
    margin-left: -4px;
    padding-left: 9px;
  }

  input:disabled + .slider,
  input:disabled + input[type=hidden] + .slider {
    background-color: $switch-disabled-false-background-color;
    border-color: $switch-disabled-false-border-color;
    cursor: not-allowed;
  }

  input:disabled + .slider::after,
  input:disabled + input[type=hidden] + .slider::after {
    background: url($base-icon-path + 'cross-gray.svg') no-repeat center center;
    background-size: 23px;
  }

  input:disabled:checked + .slider::after,
  input:disabled:checked + input[type=hidden] + .slider::after {
    background: url($base-icon-path + 'check-mark.svg') no-repeat center center;
    background-size: 16px;
  }

  input:disabled + .slider::before,
  input:disabled + input[type=hidden] + .slider::before {
    background-color: $switch-disabled-false-circle-color;
    cursor: not-allowed;
  }

  input:disabled:checked + .slider,
  input:disabled:checked + input[type=hidden] + .slider {
    background-color: $switch-disabled-true-background-color;
    border-color: $switch-disabled-true-border-color;
    cursor: not-allowed;
  }

  input:disabled:checked + .slider::before,
  input:disabled:checked + input[type=hidden] + .slider::before {
    background-color: $switch-disabled-true-circle-color;
    cursor: not-allowed;
  }

  &.disabled + label {
    color: $switch-disabled-text-color;
    cursor: not-allowed;
  }
}