.checkbox {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    text-align: center;

    transition: var(--transition-easeinout-fast);

    & > input {
        cursor: pointer;

        position: relative;

        width: 2.25rem;
        height: 2.25rem;
        border: var(--bdr-input);
        border-radius: var(--bdr-rounded);

        appearance: none;
        background-color: var(--clr-white);
        box-shadow: var(--shadow-mid);

        &:checked {
            background-color: var(--clr-primary);

            &::after {
                content: "";

                position: absolute;
                top: 45%;
                left: 50%;
                transform: translate(-50%, -50%) rotate(45deg);

                width: 0.5rem;
                height: 1rem;
                border-right: 2px solid white;
                border-bottom: 2px solid white;
            }
        }
    }

    & > label {
        cursor: pointer;
        user-select: none;

        align-content: center;

        height: 2.25rem;
        padding: 0 0 0 0.5rem;

        font-weight: bold;
    }

    &:has(input:hover),
    &:has(label:hover) {
        transform: translateY(-1px);

        & > input {
            background: var(--clr-primary-light-inverse);
            box-shadow: var(--shadow-high);

            &:checked {
                background-color: var(--clr-primary-light);
            }
        }

        & > label {
            color: var(--clr-primary-light);
        }
    }

    &:has(input:active),
    &:has(label:active) {
        transform: translateY(1px);

        & > input {
            background: var(--clr-primary-dark-inverse);
            box-shadow: var(--shadow-low);

            &:checked {
                background-color: var(--clr-primary-dark);
            }
        }

        & > label {
            color: var(--clr-primary-dark);
        }
    }

    &:has(input:disabled) {
        cursor: not-allowed;
        transform: unset;

        & > input {
            cursor: not-allowed;
            opacity: 0.7;
            background-color: var(--clr-bg-disabled);
            box-shadow: var(--shadow-mid);
        }

        & > label {
            cursor: not-allowed;
            color: unset;
        }
    }
}