.togge-switch {
    --toggleSwitchWidth: 38px;
    --toggleSwitchheight: 22px;
    --toggleSwitchCircleWidth: 18px;
    --toggleSwitchCircleHeight: 18px;
    --toggleSwitchCirclePdLine: 3px;
    width: max-content;
    display: inline-block;

    input[type=checkbox]{
        height: 0;
        width: 0;
        visibility: hidden;
    }

    label {
        cursor: pointer;
        text-indent: -9999px;
        width: var(--toggleSwitchWidth);
        height: var(--toggleSwitchheight);
        background: grey;
        display: block;
        border-radius: 100px;
        position: relative;
    }

    label:after {
        content: '';
        position: absolute;
        top: calc((var(--toggleSwitchheight) - var(--toggleSwitchCircleHeight)) / 2);
        left: var(--toggleSwitchCirclePdLine);
        width: var(--toggleSwitchCircleWidth);
        height: var(--toggleSwitchCircleHeight);
        background: #fff;
        border-radius: 50%;
        transition: 0.3s;
    }

     label:has(input:checked){
        background: var(--color-BrandeisBlue);
    }

     label:has(input:checked):after {
        left: calc(100% - var(--toggleSwitchCirclePdLine));
        transform: translateX(-100%);
    }

    label:active:after {
        width: calc(var(--toggleSwitchCircleWidth) + (var(--toggleSwitchWidth) - var(--toggleSwitchCircleWidth)) / 4);
    }
}