.chat-message-info { display: flex; align-items: center; justify-content: flex-start; gap: 0.25rem; } .chat-message-info__username { display: inline-flex; align-items: center; & + .chat-message-info__bot-indicator, & + .chat-message-info__date { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .chat-message-info__username__name { color: var(--secondary-low); font-weight: 700; @include ellipsis; max-width: 180px; } .chat-message-info__bot-indicator { text-transform: uppercase; padding: 0.25rem; background: var(--primary-low); border-radius: var(--d-border-radius); font-size: var(--font-down-2); } .chat-message-info__date { color: var(--primary-high); font-size: var(--font-down-1); &:hover, &:focus { .chat-time { color: var(--primary); } } } .chat-message-info__flag { color: var(--secondary-medium); } .chat-message-info__bookmark { .d-icon-discourse-bookmark-clock, .d-icon-bookmark { color: var(--primary-low-mid); font-size: var(--font-down-2); } } .chat-message-info__status { display: flex; margin-left: 0.2rem; margin-right: 0.2rem; .emoji { width: 16px; height: 16px; } } .chat-message-info__original-message { display: flex; align-items: center; font-size: var(--font-down-2); color: var(--primary-high); gap: 0.5em; line-height: 1.2; background: var(--tertiary-very-low); padding: 0.25em 0.75em; border-radius: 8px; .chat-channel-title { gap: 0.25em; } .chat-channel-name { color: var(--tertiary); } .chat-channel-icon { .d-icon { height: 0.9em; width: 0.9em; } } &__text, &__text:visited { color: var(--primary); } }