.sidebar-section-link-wrapper { display: flex; align-items: center; position: relative; .sidebar-section-link { box-sizing: border-box; display: inline-flex; width: 100%; align-items: center; color: var(--primary-high); transition: background-color 0.25s; &:focus, &:hover { background: var(--d-sidebar-highlight-color); outline: none; } &.active { color: var(--primary); font-weight: bold; background: var(--d-sidebar-highlight-color); } .sidebar-section-link-content-badge { @include ellipsis; padding-left: 0.5em; text-align: right; color: var(--tertiary); font-size: var(--font-down-1); font-weight: normal; margin-left: auto; } .sidebar-section-link-suffix { margin-left: 0.25rem; font-size: var(--font-down-4); } .sidebar-section-link-content-text { @include ellipsis; .emoji { width: 15px; height: 15px; } .badge-wrapper { font-size: 100%; width: 100%; .category-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } } .sidebar-section-link-personal-messages-sent, .sidebar-section-link-personal-messages-new, .sidebar-section-link-personal-messages-archive, .sidebar-section-link-personal-messages-unread, .sidebar-section-link-group-messages-new, .sidebar-section-link-group-messages-unread, .sidebar-section-link-group-messages-archive { .sidebar-section-link-content-text { margin-left: 0.5em; } } .sidebar-section-link-prefix { flex-shrink: 0; &.image { position: absolute; img { border-radius: 50%; width: 20px; aspect-ratio: auto 20 / 20; height: 20px; margin-right: 0.5em; } + .sidebar-section-link-content-text { margin-left: calc(20px + 0.5em); } } &.text { border-radius: 3px; background: rgba(var(--primary-rgb), 0.1); text-align: center; font-size: var(--font-down-1); padding: 0.2em 0.5em; margin-right: 0.25em; } &.icon { position: relative; margin-right: 0.5em; svg { font-size: var(--font-down-1); } svg.prefix-badge { position: absolute; background-color: transparent; border-radius: 50%; padding: 2px 2px 3px; color: var(--primary-high); height: 0.5rem; width: 0.5rem; top: -0.2em; right: 0; margin-right: -0.6em; } } } .sidebar-section-link-hover { margin-left: auto; .sidebar-section-hover-button { display: none; color: var(--primary-medium); border: none; background: transparent; padding: 0 0 0 0.5em; height: 100%; transition: background-color 0.25s; &:focus, .discourse-no-touch & { &:hover { color: var(--primary); } } svg { font-size: var(--font-down-1); } } &:hover { .sidebar-section-hover-button { background: var(--primary-low); } } } &:hover { .sidebar-section-hover-button { display: block; } } }