.non-form-checkbox {
    line-height: 28px;
    display: flex;
    gap: 6px;
    cursor: pointer;
    text-wrap: nowrap;
}

/* Подсвечиваем выбранное */
.non-form-checkbox:has(.mdi-checkbox-marked),
.non-form-checkbox:has(.mdi-checkbox-marked) .mdi {
    color: var(--activated-color);
}

/* Подсвечиваем при наведении только на настольном */
@media (min-width: 576px) {

    .non-form-checkbox:hover,
    .non-form-checkbox:hover span.mdi {
        color: var(--hover-color);
    }
}

/* Иконка */
.non-form-checkbox span.mdi {
    font-size: 20px;
    margin-left: -3px;
}