@import '../palette';

.slider {
  input[type="checkbox"] {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
    &:checked + label:after {
      margin-left:37px;
    }
    &:checked + label:before {
      @include border($positive-color);
      background-color: rgba($positive-color, .35);
    }
  }

  .label-text {
    position: relative;
    top: -11px;
    display: inline-block;
    margin-left: em-calc(16px);
  }

  label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
    padding: 2px;
    width: 82px;
    height: 33px;
    border-radius: 3px;

    &:before, &:after {
      display: block;
      position: absolute;
      top: 2px;
      left: 2px;
      right: 2px;
      bottom: 2px;
      content: "";
    }

    &:before {
      right: 1px;
      background-color: #F1F1F1;
      border-radius: 3px;
      transition: background 0.4s;
    }

    &:after {
      top: 4px;
      left: 5px;
      bottom: 4px;
      right: 5px;
      width: 37px;
      background-color: #FFF;
      border-radius: 3px;
      box-shadow: 0 0 10px rgba(0, 0, 0, .5);
      transition: margin 0.4s;
    }
  }
}