.myCheckBox{
    --Checkbox-bgDisable: var(--neutral-600);
    --Checkbox-borderUnselected: var(--opacity-70b);
    --Checkbox-checked: var(--primary-light-600);
    --Checkbox-hale: var(--opacity-50b);
}

@media (prefers-color-scheme: dark) {
.myCheckBox {
        --Checkbox-bgDisable: var(--neutral-600);
        --Checkbox-borderUnselected: var(--opacity-50w);
        --Checkbox-checked: var(--primary-dark-600);
        --Checkbox-hale: var(--opacity-50b);
    }
}



.myCheckBox>div>input {

    width: 1.125rem;
    height: 1.125rem;
    display: flex;
    padding: 0.25rem;
    justify-content: center;
    align-items: center;

    border-radius: 6.25rem;

    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    z-index: 2;
    position: absolute;
    cursor: pointer;
    top: -2px;
    left: -2px;
}

.myCheckBox.disable>div>input {
    display: none;
    cursor: auto;
}

.myCheckBox {
    display: flex;
    width: 2rem;
    height: 2rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    aspect-ratio: 1/1;

    justify-content: center;
    align-items: center;

    position: relative;
    cursor: pointer;
}

.myCheckBox.disable {
    cursor: auto;
}

.myCheckBox::before {
    content: '';
    width: 2rem;
    aspect-ratio: 1 / 1;
    top: calc(-0.5rem - 0.125rem);
    left: calc(-0.5rem - 0.125rem);
    right: unset;
    opacity: 0;
    background: radial-gradient(circle, transparent 0%, transparent 43.75%, var(--Checkbox-hale) 43.75%, var(--Checkbox-hale) 100%);
    overflow: hidden;
    border-radius: 70%;
}

.myCheckBox.disable::before {
    content: unset !important;
}

.myCheckBox:has(>div:hover)::before {
    animation: showHaleCheckBox 3s ease 0s infinite forwards;
}

@keyframes showHaleCheckBox {
    0% {
        width: 1.125rem;
        border-radius: 0.375rem;
        opacity: 1;
        background: radial-gradient(circle, transparent 0%, transparent 0%, var(--Checkbox-hale) 0%, var(--Checkbox-hale) 100%);
    }

    100% {
        width: 2rem;
        border-radius: 70%;
        opacity: 0;
        background: radial-gradient(circle, transparent 0%, transparent 43.75%, var(--Checkbox-hale) 43.75%, var(--Checkbox-hale) 100%);
    }
}

.myCheckBox::after {
    content: '';
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 0.375rem;
    background-color: transparent;

    position: absolute;
    top: 0.4375rem;
    right: 0.4375rem;
    box-sizing: border-box;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.myCheckBox:has(>div>input:checked)::after {
    background-color: var(--Checkbox-bgDisable);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}









.myCheckBox>div {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 0.375rem;
    border: 2px solid var(--Checkbox-borderUnselected);
    background-color: transparent;
    position: absolute;
    top: 0.4375rem;
    right: 0.4375rem;
    box-sizing: border-box;
    z-index: 1;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.myCheckBox>div:hover {
    background-color: var(--Checkbox-bgDisable);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;

}

.myCheckBox.disable>div:has(>input) {
    border: 2px solid var(--Checkbox-bgDisable);

}

.myCheckBox.disable>div:has(>input:checked) {
    border: 2px solid transparent;
}

.myCheckBox.disable>div:hover {
    background-color: transparent;

}


.myCheckBox>div:has(>input)::after {
    content: '';
    width: calc(((1.125rem - 4px) * 2) / 3);
    height: calc(((1.125rem - 4px) * 2) / 3);
    border-radius: 0.175rem;
    background-color: transparent;

    position: absolute;
    top: calc((1.125rem - 4px) / 6);
    left: calc((1.125rem - 4px) / 6);
    box-sizing: border-box;
    z-index: 1;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.myCheckBox>div:has(>input:checked)::after {
    background-color: var(--Checkbox-checked);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.myCheckBox.disable>div:has(>input:checked)::after {
    background-color: var(--Checkbox-borderUnselected);
}