/* Viewer */

.viewer-container {
    font-size: 14px;
}

.viewer-container .channel-container:not(.is-server), .viewer-container .client-container {
    margin-left: 1.4em;
}

.viewer-container .channel-container:not(.is-spacer) .channel, .viewer-container .client-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.viewer-container .channel-container:not(.is-spacer) > .channel > .channel-name,
.viewer-container .channel-container:not(.is-spacer) > .channel > .channel-icons,
.viewer-container .client-name, .viewer-container .client-icons {
    display: flex;
    align-items: center;
}

.viewer-container .channel-container:not(.is-spacer) > .channel > .channel-name,
.viewer-container .client-name {
    word-break: break-all;  /* For all browsers */
    word-break: break-word; /* For some browsers that support it - unofficial! */
}

.viewer-container .client-icons {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.viewer-container .client-icons .icon,
.viewer-container .client-icons .icon-flag,
.viewer-container .channel-icons .icon {
    margin-left: 0.5em;
}

.viewer-container .channel-container:not(.is-spacer) .channel,
.viewer-container .client-container {
    position: relative;
    z-index: 0;
    cursor: pointer;
}

.viewer-container .channel-container:not(.is-spacer) .channel::after,
.viewer-container .client-container::after {
    content: "";
    z-index: -1;

    position: absolute;
    top: -3px;
    left: -10px;
    bottom: -3px;
    right: -10px;

    border-radius: 4px;
    background-color: rgba(0, 0, 0, .15);
    opacity: 0;
    transition: opacity ease 300ms;
}

.viewer-container .channel-container:not(.is-spacer) .channel:hover::after,
.viewer-container .client-container:hover::after,
.viewer-container .channel-container:not(.is-spacer) .channel:focus::after,
.viewer-container .client-container:focus::after {
    opacity: 1;
}

.viewer-container .channel-name .icon, .viewer-container .client-name .icon {
    margin-right: 0.5em;
}

.viewer-container .icon {
    height: 16px;
    max-width: 16px;
}

.viewer-container .channel-container.spacer-left > .channel {
    text-align: left;
}

.viewer-container .channel-container.spacer-center > .channel {
    text-align: center;
}

.viewer-container .channel-container.spacer-right > .channel {
    text-align: right;
}

.viewer-container .channel-container.spacer-repeat > .channel {
    overflow: hidden;
    white-space: nowrap;
}

.viewer-container .is-query {
    display: none;
}