@import "./mixins/border_retina.css";

@component-namespace zan {
  @b switch { 
    height: 31px;
    width: 51px;
    display: inline-block;
    position: relative;
    background: #fff;
    border-radius: 16px;
    &::after{
      @mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
      border-width: 3px;
      border-radius: 32px;
    }

    @e node {
      width: 28px;
      height: 28px;
      border-radius: 13.5px;
      background-color: #fff;
      position: absolute;
      box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
      left: 1px;
      top: 1px;
      z-index: 2;
      &::after {
        @mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
        border-radius: 27px;
      }
    }

    @e loading {
      width: 16px;
      height: 16px;
      position: relative;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
    }

    @m on {
      background-color: #44db5e;
      &::after { border-color: #44db5e; }
      .zan-switch__node {
        transform: translateX(20px);
      }
    }

    @m off {
      background-color: #fff;
      border-color: rgba(0, 0, 0, .1);
    }

    @m disabled {
      opacity: .4;
    }
  }
}