@mixin switch-theme($color) {
    box-shadow: inset 0 0 0 1em $color;
    border-color: $color;
}

ui-switch {
    display: inline-block;
    height: 32px;
    width: 52px;
    font-size: 32px;
    background: none;
    box-shadow: inset 0 0 0 2px $color-gray-light;
    vertical-align: middle;
    border-radius: 16px;
    position: relative;
    padding: 2px;
    transition: all .2s;
    cursor: pointer;
    > .ui-input-raw {
        opacity: 0;
        position: absolute;
        width: 0;
        height: 0;
        z-index: -1;
    }

    &.ui-checked {
        @include switch-theme($color-gray-light);
        .ui-switch-btn {
            transform: translateX(20px);
        }
        &.ui-primary {
            @include switch-theme($color-primary);
        }
        &.ui-success {
            @include switch-theme($color-success);
        }
        &.ui-info {
            @include switch-theme($color-info);
        }
        &.ui-danger {
            @include switch-theme($color-danger);
        }
        &.ui-warning {
            @include switch-theme($color-warning);
        }
    }
    &[readonly] {
        cursor: auto;
    }

    &:active {
        @include switch-theme($color-gray-light);
        &.ui-primary {
            @include switch-theme($color-primary);
        }
        &.ui-success {
            @include switch-theme($color-success);
        }
        &.ui-info {
            @include switch-theme($color-info);
        }
        &.ui-danger {
            @include switch-theme($color-danger);
        }
        &.ui-warning {
            @include switch-theme($color-warning);
        }
        .ui-switch-btn {
            width: 34px;
        }

        &.ui-checked {
            .ui-switch-btn {
                left: -6px;
            }
        }
    }

    &.disabled, &[disabled] {
        opacity: .5;
        cursor: not-allowed;
    }
}

.ui-switch {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 14px;
    cursor: inherit;
    background: none;
    border: none;
    padding: 0;
    display: block;
}

.ui-switch-btn {
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background-color: #fff;
    border: none;
    position: absolute;
    left: 0;
    top: 0;
    transition: all .3s;
    box-shadow: 0 .05em .3em rgba(0, 0, 0, .4);
    overflow: hidden;
    > span {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }
}