@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;
  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: @component-active-color;
    .handle {
      left: 18px;
    }
  }
}