@import '../../style/mixin';

.Yep-switch {
  vertical-align: middle;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  align-self: center;
  width: 108px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;

  .Yep-switch-inner {
    width: $switch-width;
    height: $switch-height;
    border-radius: $switch-border-radius;
    box-sizing: border-box;
    background: #F2F2F2;
    z-index: 0;
    margin: 0;
    padding: 0;
    appearance: none;
    border: 0;
    cursor: pointer;
    position: relative;
    transition: all 300ms;

    &-checked {
      background: $switch-fill;
    }
    &-disabled{
      opacity: $opacity-disabled;
    }

  }
  .Yep-switch-circle {
    position: absolute;

    top: 0;
    width: $switch-circle;
    height: $switch-circle;
    border-radius: $switch-circle;
    box-sizing: border-box;
    background: $fill-base;
    z-index: 0;
    margin: 0;
    padding: 0;
    appearance: none;
    border: 0;
    cursor: pointer;
    transition: all 300ms;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
    &-unchecked{
      left: 0;
    }
    &-checked {
      right: 0;
    }
  }


  input[type='checkbox'] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    border: 0 none;
    appearance: none;

    &:checked {
      & + .checkbox {
        &:before {
          background: $switch-fill;
          transform: translateX($switch-transform);
        }
        @include bd-all($color: $switch-fill, $radius: $switch-border-radius,$width:3PX);
      }
    }

    &:disabled {
      & + .checkbox {
        opacity: $opacity-disabled;
      }
    }
  }
}