.view-switch
    display: inline-block
    width: 48px
    height: 24px
    line-height: 22px
    border-radius: 24px
    vertical-align: middle
    border: 1px solid #ccc
    background-color: #ccc
    position: relative
    cursor: pointer
    user-select: none
    transition: all $transition-time $ease-in-out

    &-inner
        color: #fff
        font-size: $font-size-small
        position: absolute
        left: 25px
        transition: left $transition-time $ease-in-out, width $transition-time $ease-in-out

        i
            width: 12px
            height: 12px
            text-align: center

    &:after
        content: ''
        width: 20px
        height: 20px
        border-radius: 20px
        background-color: #fff
        position: absolute
        left: 1px
        top: 1px
        cursor: pointer
        transition: left $transition-time $ease-in-out, width $transition-time $ease-in-out
    &-checked 
        border-color: $primary-color
        background-color: $primary-color

        .view-switch-inner 
            left: 8px

        &:after 
            left: calc(100% - 20px)

        &:active:after
            left: calc(100% - 8px)

    &-disabled
        cursor: $cursor-disabled
        background: #f3f3f3
        border-color: #f3f3f3

        &:after
            background: #ccc
            cursor: not-allowed

        .view-switch-inner
            color: #ccc
    &:active:after
        width: 26px

    &:focus
        box-shadow: 0 0 0 2px fade($primary-color, 20%)
        outline: 0

    &:focus:hover
        box-shadow: none

    &-small
        width: 24px
        height: 12px
        line-height: 10px
        &:after
            width: 10px
            height: 10px
            top: 0
            left: 0
        &:active:after
            width: 14px

    &-small&-checked:after
        left: 12px

    &-small:active&-checked:after
        left: 8px

    &-large
        width: 60px
        &:active:after 
            width: 26px

    &-large:active:after
        width: 32px

    &-large&-checked:after
        left: 37px

    &-large:active&-checked:after
        left: 25px