//
// Switch
// --------------------------------------------------

.switch {
  $size: $grid-unit-y * 2;
  $padding: 1px;

  & > input[type="checkbox"] {
    display: none;

    &:checked {
      & + label {
        &:before {
          background: $brand-primary;
        }

        &:after {
          left: auto;
          right: $padding;
        }
      }
    }
  }

  &.disabled {
    & > label {
      cursor: not-allowed;

      &:before {
        @include themes(background, switch-disabled-bg);
      }

      &:after {
        @include box-shadow(none);
      }
    }

    > input[type="checkbox"] {
      &:checked {
        & + label {
          &:before {
            background: $brand-primary-light-4;
          }
        }
      }
    }
  }

  & > label {
    cursor: pointer;
    height: 0;
    position: relative;
    width: $grid-unit-x * 4;
    border: none;
    margin-bottom: 0;

    &:before {
      content: "";
      height: $size;
      width: $grid-unit-x * 4;
      top: 0;
      border-radius: ceil($size * 0.5);
      position: absolute;
      transition: all 0.4s ease-in-out;

      @include themes(background, switch-default-bg);
    }

    &:after {
      content: "";
      height: $size - $padding * 2;
      width: $size - $padding * 2;
      left: $padding;
      top: $padding;
      background: $color-white;
      border-radius: ceil($size * 0.5);
      position: absolute;
      transition: all 0.3s ease-in-out;

      @include box-shadow(0 2px 4px $color-grey-rgba-16);
    }
  }

  // Style Variations

  &-success {
    & > input[type="checkbox"] {
      &:checked {
        & + label {
          &:before {
            background: $brand-success;
          }
        }
      }
    }
  }

  &-warning {
    & > input[type="checkbox"] {
      &:checked {
        & + label {
          &:before {
            background: $brand-warning;
          }
        }
      }
    }
  }

  &-info {
    & > input[type="checkbox"] {
      &:checked {
        & + label {
          &:before {
            background: $brand-info;
          }
        }
      }
    }
  }

  &-danger {
    & > input[type="checkbox"] {
      &:checked {
        & + label {
          &:before {
            background: $brand-danger;
          }
        }
      }
    }
  }
}