@import '../../styles/variables';
@import '../../styles/mixins';

.Switch {
  display: flex;

  &__label {
    margin-right: $item;
    display: block;
    margin-bottom: 5px;
    font-size: $font-small;
    color: $gray50;
  }

  &__control {
    font-size: $font-big;

    label {
      position: relative;
      display: block;
      width: 2em;
      height: 1em;
      cursor: pointer;

      &:before {
        position: absolute;
        left: .1em;
        width: 2em;
        height: 1em;
        content: '';
        transition: background .1s ease;
        border-radius: 50px;
        background: $gray95;
        box-shadow: inset 0 1px 1px rgba($gray95, .5);
      }

      &:after {
        position: absolute;
        z-index: 2;
        left: 0;
        width: 1em;
        height: 1em;
        content: '';
        transition: all .2s ease;
        animation: switch-off .2s ease-out;
        border-radius: 50px;
        background: white;
        box-shadow: 0 2px 5px 0 rgba($black, .3);
      }
    }

    input {
      &[type=checkbox] {
        display: none;
        visibility: hidden;

        &:checked + label:before {
          background: $action-color;
          box-shadow: inset 0 1px 1px rgba($action-color, .5);
        }

        &:checked + label:after {
          left: 1.1em;
          animation: switch-on .2s ease-out;
        }
      }
    }

    &_danger {
      input {
        &[type=checkbox] {
          &:checked + label:before {
            background: $error-color;
            box-shadow: inset 0 1px 1px rgba($error-color, .5);
          }
        }
      }
    }
  }
}

@keyframes switch-on {
  50% {
    transform: scaleX(1.3);
  }
}

@keyframes switch-off {
  50% {
    transform: scaleX(1.3);
  }
}