﻿.custom-switch {
    padding-left: 2.25rem;
}

    .custom-switch .custom-control-label::before {
        left: -2.25rem;
        width: 1.75rem;
        pointer-events: all;
        border-radius: 0.5rem;
        margin-top: -1px;
    }

    .custom-switch .custom-control-label::after {
        margin-top: -1px;
        top: calc(0.25rem + 2px);
        left: calc(-2.25rem + 2px);
        width: calc(1rem - 4px);
        height: calc(1rem - 4px);
        /*background-color: #adb5bd;*/
        border: 1px solid var(--input-border);
        background-color: var(--white);
        border-radius: 0.5rem;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
        transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
    }

.custom-control-input:checked ~ .custom-control-label::after {
    border-color: var(--primary);
}
.custom-control-input:active ~ .custom-control-label::before {
    background-color: var(--purple);
}

.custom-control-input:active ~ .custom-control-label::after {
    border-color: var(--primary);
}
.custom-control-label i:first-child {
    margin-right: 4px;
}

/*@media (prefers-reduced-motion: reduce) {
    .custom-switch .custom-control-label::after {
        transition: none;
    }
}*/

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #fff;
    -webkit-transform: translateX(0.75rem);
    transform: translateX(0.75rem);
}

.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(0, 123, 255, 0.5);
}

.custom-control-input:disabled ~ .custom-control-label::before {
    background-color:var(--input-border);
    cursor:not-allowed;
}

.custom-switch .custom-control-input:disabled ~ .custom-control-label::after {
    background-color: var(--discret);
}