.u-switch-span {

  .u-switch {
    height: 10px;
    width: 26px;
    background: linear-gradient(90deg, #858A94 0%, #B9BCC2 100%);
    border: none;
    &:after {
      height: 14px;
      width: 14px;
      top: -3px;
      box-shadow: 0px 1px 4px 0px rgba(80, 87, 102, 0.3);
      left: -1px;
    }

    &.is-checked {
      background: linear-gradient(270deg, #A4C0F3 0%, #6A98EB 100%);
      &:after {
        left: 13px;
      }
    }

    &.u-switch-sm {
      width: 28px;
      height: 14px;

      &::after {
        width: 12px;
        height: 12px;
      }

      &.is-checked::after {
        left: 14px;
      }
    }
  }
}