.sidebar { max-height: calc(100vh - 120px); overflow: auto; position: sticky; top: 120px; ul > li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebarItemName { margin-right: 0.5em; position: relative; overflow: hidden; text-overflow: ellipsis; } .counter { @include font-size(1.2rem); align-items: center; align-self: flex-start; background: #f6f6f6; border-radius: 0.8rem; display: inline-flex; font-weight: bold; justify-content: center; min-width: 2em; margin-left: 0.5em; padding: 0.25em 0.5em 0.15em; transition: background-color 0.2s; } .unread { position: relative; &::after { background: #2638d9; border-radius: 100%; content: ''; display: inline-block; height: 0.5em; left: 100%; margin-left: 0.3em; position: absolute; top: 0.5em; width: 0.5em; } } .settings { display: flex; justify-content: space-between; margin: 2em 0; } a { img { transition: filter 0.3s; } &:hover { img { filter: invert(1); } .counter { background: #000; } } } .icon { display: inline-block; line-height: 1; height: 2rem; margin-right: 0.5em; vertical-align: middle; width: 2.2rem; img { height: 100%; object-fit: contain; object-position: center; width: 100%; } } h4 { color: #9fa1a7; cursor: pointer; @include font-size(1.2rem); letter-spacing: 0.05em; text-transform: uppercase; position: relative; &:after { content: '+'; font-size: 1.6em; line-height: 1; position: absolute; right: 2.5rem; top: -0.2em; transition: transform 0.3s; } &.opened { &:after { right: 0.9rem; transform: rotate(45deg); } } } .hidden { display: none; } }