@import "ui-variables";

.slide-switch {
  border-radius: 12px;
  box-shadow: inset 0 1px 1.5px rgba(0,0,0,0.3);
  background-color: @gray-light;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  height: 21px;
  width: 40px;

  .handle {
    border-radius: 14px;
    width: 25px;
    height: 25px;
    position: absolute;
    top: -2px;
    left: -3px;
    background-color: @white;
    box-shadow: 0 0.5px 3px rgba(0,0,0,0.4);
    transition: all 150ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  &.active {
    background-color: #69ba55;
    .handle {
      left: 18px;
    }
  }
}