$active-switch-color: #428bca;
$inactive-switch-color: #a5a5b2;

body .p-toggleswitch {
    width: 40px;
    height: 24px;
    &-slider {
        background: $inactive-switch-color !important;
        border-radius: 20px;
        border: none;
        &::before {
            background: #ffffff !important;
            border-radius: 20px;
            width: 16px;
            height: 16px;
            top: 15%;
            left: 4px;
            transition:
                background 100ms,
                left 100ms;
        }
    }

    &-checked {
        .p-toggleswitch-slider {
            background: $active-switch-color !important;
            &::before {
                left: 20px !important;
                transition:
                    background 100ms,
                    left 100ms;
            }
        }
        &:has(input:hover) {
            .p-toggleswitch-slider {
                background: $active-switch-color !important;
            }
        }
    }

    &:has(input:hover) {
        .p-toggleswitch-slider {
            background: $inactive-switch-color !important;
        }
    }

    &.p-disabled {
        opacity: 0.5;
    }
}