.na-li--hovered {
    transform: translateY(-1px);
    box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .08);
}

.na-li--selected-outline {
    outline: 2px solid var(--cui-primary, #5856d6);
    outline-offset: 0;
    box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .12);
}

.na-li--hovered.na-li--selected {
    box-shadow: 0 .45rem 1rem rgba(0, 0, 0, .16);
}

.na-li.na-li--selected-primary {
    --na-li-accent: color-mix(in srgb, var(--cui-primary, #5856d6) 85%, transparent);
    box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .08);
    transition: background-color .15s ease, box-shadow .15s ease;
}

.na-li {
    position: relative;
    border-left-width: 6px !important;
    border-left-style: solid !important;
    border-left-color: var(--na-li-accent, rgba(108, 117, 125, .6)) !important;
}

.na-li--todo,
.na-li--gray {
    --na-li-accent: color-mix(in srgb, var(#6c757d) 75%, transparent);
}

.na-li--success,
.na-li--green {
    --na-li-accent: color-mix(in srgb, var(--bs-success, #198754) 85%, transparent);
}

.na-li--warning,
.na-li--yellow {
    --na-li-accent: color-mix(in srgb, var(--bs-warning, #ffc107) 85%, transparent);
}

.na-li--failed,
.na-li--error,
.na-li--red {
    --na-li-accent: color-mix(in srgb, var(--bs-danger, #dc3545) 85%, transparent);
}

.na-li--running,
.na-li--blue {
    --na-li-accent: color-mix(in srgb, var(--bs-warning, #5ab7ec) 85%, transparent);
}

.na-li--selected-background {
    background-color: color-mix(in srgb, var(--cui-primary, #5856d6) 5%, transparent);
}