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

_default = #ccc;
_active = _blue;

for size in _size {
  .hiui-switch-{size} {
    _h = _switch_size_ + size;
    _w = floor(_h * 1.67);
    _gap = _switch_gap_ + size;
    _dot = _h - _gap * 2;

    width: _w;
    height: _h;

    &::after {
      width: _dot;
      height: _dot;
      left: _gap;
      top: _gap;
    }

    &.checked::after {
      transform: translateX(_w - _dot - _gap * 2);
    }
  }
}

.hiui-switch {
  display: inline-block;
  position: relative;
  border-radius: 40px;
  background-color: _default;
  transition: background-color .3s;

  input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
  }

  &::after {
    content: '';
    border-radius: 50%;
    position: absolute;
    background-color: #fff;
    cursor: pointer;
    transition: transform .3s;
    z-index: 1;
  }

  &.checked {
    background-color: _active;
  }

  &.disabled {
    opacity: .2;

    input {
      cursor: not-allowed;
    }
  }
}