.wk-switch{
    display: flex;
    align-items: center;

    &--centered{
        justify-content: center;
    }

    &--darken{
        .dashboard-switch__inner{
            background-color: #cbd5e0;
        }
    }

    &__label{
        user-select: none;
    }

    &__switch{
        flex-shrink: 0;
        margin-right: 5px;
        padding: 2px;
        cursor: pointer;
    }

    &__inner{
        width: 45px;
        height: 24px;
        background-color: $danger;
        border-radius: 12px;
        position: relative;
        transition: all .2s ease;
        border: 2px solid $gray_100;

        &.active{
            background-color: $success;
            transition-delay: .1s;

            &.secondary{
                background-color: $secondary;
            }
        }
    }

    &__thumb{
        background-color: #fff;;
        border: none;
        border-radius: 50%;
        height: 16px;
        width: 16px;
        position: absolute;
        top: 2px;
        left: 2px;
        cursor: pointer;
        outline: none;
        transition: all .2s ease;
        transform-origin: center;

        &:hover{
            background-color: #cbd5e0;;
        }

        &.active{
            transform: translateX(21px);
            background-color: #fff;
            box-shadow: 0 0 5px 2px rgba(0,0,0,.15);
        }
    }
}

.dashboard-switch-big{
    display: block !important;
    text-align: center;

    &__label{
        margin-bottom: 10px;
        width: 100%;
        display: block;
        text-align: center;
        font-weight: bold;
        font-size: 17px;
    }

    &__container{
        display: flex;
        justify-content: center;
    }

    &__switch{
        margin: 0 10px;
        transform: scale(1.2);
        position: relative;
    }

    &__offtext{
        position: absolute;
        right: 100%;
        top: 50%;
        transform: scale(.84) translateY(-50%);
    }

    &__ontext{
        position: absolute;
        left: 100%;
        top: 50%;
        transform: scale(.84) translateY(-50%);
    }
}