/* Keep the label compact and reserve row highlighting for arrivals and jumps. */
.catalyst-note-number {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 6px;
    border: 1px solid var(--btn-default-border);
    border-radius: 4px;
    color: var(--text-gray-color);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: color 150ms ease-in-out, border-color 150ms ease-in-out;
}

.catalyst-note-actions {
    /* Center both controls while retaining the dropdown's own button styling. */
    display: inline-flex;
    align-items: center;
}

/* Espo's small dropdown button has a 3px top margin; match it to align the visible borders. */
.catalyst-note-number-action {
    margin-top: 3px;
}

.catalyst-note-number:hover,
.catalyst-note-number:focus {
    color: var(--link-color);
    border-color: var(--btn-default-hover-border);
    text-decoration: none;
}

.catalyst-note-number.is-copied {
    color: var(--link-color);
}

.catalyst-note-reference {
    color: var(--link-color);
    font-weight: 500;
}

[data-catalyst-note-number] {
    transition: background-color 200ms ease-in-out;
}

[data-catalyst-note-number].catalyst-note-highlight {
    background-color: rgba(228, 161, 51, .16);
}

html.dark [data-catalyst-note-number].catalyst-note-highlight {
    background-color: rgba(228, 161, 51, .22);
}