.chat-channel-title { display: flex; align-items: center; .category-chat-private .d-icon { background-color: var(--secondary); position: absolute; border-radius: 5px; padding: 2px 2px 3px; color: var(--primary-high); height: 0.5em; width: 0.5em; left: calc(0.6125em + 3px); top: -4px; } .chat-name, .category-chat-name, .topic-chat-name, .tag-chat-name, &__usernames, .dm-usernames { @include ellipsis; font-size: var(--font-0); margin: 0; .emoji { height: 1.2em; vertical-align: text-bottom; width: 1.2em; } } .d-icon-lock { margin-right: 0.25em; } .topic-chat-icon { color: var(--primary-medium); display: flex; } .chat-unread-count { display: inline-block; color: var(--secondary); background-color: var(--tertiary-med-or-tertiary); font-size: var(--font-down-2); border-radius: 100%; min-width: 1.4em; min-height: 1.4em; height: 1.4em; width: 1.4em; padding: 1px; margin-left: 0.5rem; text-align: center; } } .chat-channel-title__users-count { display: flex; border-radius: 3px; background: rgba(var(--primary-rgb), 0.1); text-align: center; font-weight: 700; font-size: var(--font-down-1); align-items: center; padding: 0.25rem 0.5rem; & + .chat-channel-title__name { margin-left: 0.5rem; } } .chat-channel-title__category-badge { color: var(--primary-medium); display: flex; font-size: var(--font-up-1); position: relative; + .chat-channel-title__name { margin-left: 0.5rem; } } .chat-channel-title .chat-user-avatar { font-size: var(--font-up-1); + .chat-channel-title__usernames { margin-left: 0.5rem; } } .chat-channel-title__restricted-category-icon { background-color: var(--secondary); position: absolute; border-radius: 50%; padding: 2px 2px 3px; color: var(--primary-high); height: 0.5rem; width: 0.5rem; right: -0.5rem; top: -0.1rem; } .chat-channel-title__category-title { .emoji { height: 1.2em; vertical-align: text-bottom; width: 1.2em; } } .chat-channel-title__name { @include ellipsis; font-size: var(--font-0); color: var(--primary); } .channel-info { .chat-channel-title__name { max-width: 100%; } }