.hx-note[href] {
    color: inherit;
    text-decoration: none;
}

.hx-note--refund {
    --hx-event-color: #f59e0b;
}

.hx-note--support {
    --hx-event-color: #38bdf8;
}

.hx-note--refund,
.hx-note--support {
    background:
        linear-gradient(105deg, color-mix(in srgb, var(--hx-event-color) 9%, transparent), transparent 52%),
        rgba(7, 7, 7, .72);
}

.hx-note--refund:hover,
.hx-note--support:hover,
.hx-note--refund.is-unseen,
.hx-note--support.is-unseen {
    border-color: color-mix(in srgb, var(--hx-event-color) 48%, transparent);
    background:
        linear-gradient(105deg, color-mix(in srgb, var(--hx-event-color) 14%, transparent), transparent 58%),
        rgba(10, 10, 10, .92);
}

.hx-note--refund.is-unseen::after,
.hx-note--support.is-unseen::after {
    background: var(--hx-event-color);
    box-shadow: 0 0 12px color-mix(in srgb, var(--hx-event-color) 48%, transparent);
}

.hx-note--refund .hx-note-meta em i,
.hx-note--support .hx-note-meta em i,
.hx-note--refund.is-unseen .hx-note-index b,
.hx-note--support.is-unseen .hx-note-index b,
.hx-note--refund .hx-note-state,
.hx-note--support .hx-note-state {
    color: var(--hx-event-color);
}

.hx-note--refund.is-unseen .hx-note-index > i,
.hx-note--support.is-unseen .hx-note-index > i {
    background: linear-gradient(180deg, var(--hx-event-color), transparent);
}

.hx-note--refund.is-unseen .hx-note-index > i::before,
.hx-note--support.is-unseen .hx-note-index > i::before {
    border-color: var(--hx-event-color);
    background: var(--hx-event-color);
    box-shadow: 0 0 9px color-mix(in srgb, var(--hx-event-color) 60%, transparent);
}

@supports not (color: color-mix(in srgb, white, black)) {
    .hx-note--refund,
    .hx-note--support {
        background: rgba(10, 10, 10, .92);
    }

    .hx-note--refund:hover,
    .hx-note--refund.is-unseen {
        border-color: rgba(245, 158, 11, .48);
    }

    .hx-note--support:hover,
    .hx-note--support.is-unseen {
        border-color: rgba(56, 189, 248, .48);
    }
}