.channelEntry { position: relative; display: flex; flex-direction: row; justify-content: stretch; width: 100%; min-height: 16px; align-items: center; cursor: pointer; .containerArrow { width: 16px; margin-left: -16px; text-align: center; &.down { align-self: normal; } :global .arrow { border-color: hsla(220, 5%, 30%, 1); } } .channelType { flex-grow: 0; flex-shrink: 0; margin-right: 2px; } .containerChannelName { display: flex; flex-direction: row; flex-grow: 1; flex-shrink: 1; justify-content: left; max-width: 100%; /* important for the repetitive channel name! */ overflow-x: hidden; height: 16px; &.align-right { justify-content: right; } &.align-center, &.align-repetitive { justify-content: center; } .channelName { align-self: center; color: var(--channel-tree-entry-color); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } &.align-repetitive { .channelName { text-overflow: clip; } } } .icons { display: flex; flex-direction: row; padding-right: 5px; flex-grow: 0; flex-shrink: 0; } &.moveSelected { border-bottom: 1px solid black; } .showChannelNormalOnly { display: none; &.channelNormal { display: block; } } .icon_no_sound { z-index: 0; display: flex; position: relative; .background { height: 14px; width: 10px; background: red; position: absolute; top: 1px; left: 3px; z-index: -1; } } }