.myRadioButton {
    --switch-border-off: var(--neutral-500);
    --switch-bg-off: var(--neutral-200);
    --switch-bg-on: var(--primary-light-600);
    --switch-state-effect-on: var(--opacity-10b);
    --switch-thumb-off: var(--neutral-500);
    --switch-thumb-on: var(--neutral-600);
    --switch-border-disable: var(--transparent);
}

@media (prefers-color-scheme: dark) {
.myRadioButton {
        --switch-border-off: var(--neutral-400);
        --switch-bg-off: var(--neutral-200);
        --switch-bg-on: var(--primary-dark-600);
        --switch-state-effect-on: var(--opacity-10b);
        --switch-thumb-off: var(--neutral-600);
        --switch-thumb-on: var(--neutral-100);
        --switch-border-disable: var(--transparent);
    }
}



.myRadioButton>input {
    opacity: 0;
    width: 3.25rem;
    height: 1.5rem;
    position: absolute;
    top: -0.125rem;
    left: -0.125rem;

    z-index: 3;
}

.myRadioButton.disable>input {
    display: none;
}

.myRadioButton {
    display: flex;
    width: 3.25rem;
    height: 1.5rem;
    padding: 0;
    justify-content: center;
    align-items: center;

    border: 0.125rem solid var(--switch-border-off);
    background: var(--switch-bg-off);
    box-sizing: border-box;
    position: relative;
    border-radius: 6.25rem;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}


.myRadioButton:has(>input:checked) {
    border: 0.125rem solid var(--switch-bg-on);
    background: var(--switch-bg-on);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}


.myRadioButton.disable {
    border-color: var(--switch-border-disable) !important;
    background: var(--switch-state-effect-on) !important;
}

.myRadioButton.disable::before {
    content: unset;
}






.myRadioButton::after {
    content: '';
    display: flex;
    padding: 0;
    justify-content: center;
    align-items: center;
    width: 1rem;
    height: 1rem;
    border-radius: 1.5rem;
    background: var(--switch-thumb-off);

    position: absolute;
    top: 0.125rem;
    right: 1.875rem;

    z-index: 2;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.myRadioButton.disable::after {
    opacity: 0.38;
    background: var(--switch-thumb-off);
}


.myRadioButton:active::after {
    width: 1.75rem;
    height: 1.75rem;
    top: -0.25rem;
    right: 1.5rem;
    -webkit-transition: all .3s ease 0.3s;
    -moz-transition: all .3s ease 0.3s;
    -o-transition: all .3s ease 0.3s;
    transition: all .3s ease 0.3s;
}

.myRadioButton.disable:active::after {
    width: 1rem;
    height: 1rem;
    top: 0.125rem;
    right: 1.875rem;
}

.myRadioButton:has(>input:checked)::after {
    content: '';
    display: flex;
    padding: 0;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 1.5rem;
    background: var(--switch-thumb-on);

    position: absolute;
    top: -0.125rem;
    right: -0.125rem;

    z-index: 2;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.myRadioButton.disable:has(>input:checked)::after {
    opacity: 1;
    background: var(--switch-thumb-off);
}

.myRadioButton:has(>input:checked):active::after {
    width: 1.75rem;
    height: 1.75rem;
    top: calc(-0.125rem - 0.125rem);
    right: calc(-0.125rem - 0.125rem);
    -webkit-transition: all .3s ease 0.3s;
    -moz-transition: all .3s ease 0.3s;
    -o-transition: all .3s ease 0.3s;
    transition: all .3s ease 0.3s;
}

.myRadioButton.disable:has(>input:checked):active::after {
    width: 1.5rem;
    height: 1.5rem;
    top: -0.125rem;
    right: -0.125rem;
}





.myRadioButton::before {
    content: '';
    display: flex;
    padding: 0;
    justify-content: center;
    align-items: center;
    width: 0rem;
    height: 0rem;
    border-radius: 6.25rem;
    background: var(--switch-state-effect-on);

    position: absolute;
    top: calc(0.75rem - 0.125rem);
    left: calc(0.75rem - 0.125rem);
    right: unset;

    z-index: 1;
}

.myRadioButton:has(>input:checked)::before {
    top: calc(0.75rem - 0.125rem);
    right: calc(0.75rem - 0.125rem);
    left: unset;
}

.myRadioButton:hover::before {
    width: 2.5rem;
    height: 2.5rem;
    top: calc(-0.5rem - 0.125rem);
    left: calc(-0.5rem - 0.125rem);
    right: unset;
    opacity: 0;
    animation: showHaleOff 1.5s ease 0s infinite forwards;
}

@keyframes showHaleOff {
    0% {
        width: 0rem;
        height: 0rem;
        top: calc(0.75rem - 0.125rem);
        left: calc(0.75rem - 0.125rem);
        opacity: 0;
    }

    80% {
        width: 2.5rem;
        height: 2.5rem;
        top: calc(-0.5rem - 0.125rem);
        left: calc(-0.5rem - 0.125rem);
        opacity: 1;
    }

    100% {
        width: 2.5rem;
        height: 2.5rem;
        top: calc(-0.5rem - 0.125rem);
        left: calc(-0.5rem - 0.125rem);
        opacity: 0;
    }
}



.myRadioButton:has(>input:checked):hover::before {
    width: 2.5rem;
    height: 2.5rem;
    top: calc(-0.5rem - 0.125rem);
    right: calc(-0.5rem - 0.125rem);
    opacity: 0;
    animation: showHale 1.5s ease 0s infinite forwards;
}

@keyframes showHale {
    0% {
        width: 0rem;
        height: 0rem;
        top: calc(0.75rem - 0.125rem);
        right: calc(0.75rem - 0.125rem);
        opacity: 0;
    }

    80% {
        width: 2.5rem;
        height: 2.5rem;
        top: calc(-0.5rem - 0.125rem);
        right: calc(-0.5rem - 0.125rem);
        opacity: 1;
    }

    100% {
        width: 2.5rem;
        height: 2.5rem;
        top: calc(-0.5rem - 0.125rem);
        right: calc(-0.5rem - 0.125rem);
        opacity: 0;
    }
}