note-row { display: flex; flex-direction: column; border-radius: 5px; outline: 1px solid var(--fill-quinary); background: var(--material-background); &:active { background-color: var(--accent-blue10); } .head, .body { padding: 2px 8px; @include comfortable { padding-block: 4px; } } .head { display: flex; align-items: center; gap: 5px; border-bottom: 1px solid var(--fill-quinary); .icon { flex-shrink: 0; } .parent-title { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: var(--fill-secondary); } } .body { display: flex; flex-direction: column; @include comfortable { gap: 2px; } .note-title { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-weight: 590; } .note-date { float: right; color: var(--fill-secondary); } } }