.multicheck {
    cursor: pointer;

    position: relative;

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

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

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

    &:hover {
        transform: translateY(-1px);
        background: var(--clr-checkbox-bg-hover);
        box-shadow: var(--shadow-heavy);
    }

    &:active {
        transform: translateY(1px);
        background: var(--clr-checkbox-bg-active);
        box-shadow: var(--shadow-light);
    }

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

        &::after {
            content: "";

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

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

        &:hover {
            background-color: var(--clr-checkbox-bg-checked-hover);
        }

        &:active {
            background-color: var(--clr-checkbox-bg-checked-active);
        }
    }

    &:disabled {
        cursor: not-allowed;
        opacity: 0.7;
        background-color: var(--clr-input-disabled);

        &:hover {
            transform: unset;
            box-shadow: var(--shadow-mid);
        }

        &:active {
            transform: unset;
            box-shadow: var(--shadow-mid);
        }
    }
}