@import "../../../../css/static/properties";
@import "../../../../css/static/mixin";

/* Variables */
html:root {
    --menu-bar-background: #454545;
    --menu-bar-divider: #393838;
}

/* max height is 2em */
.controlBar {
    display: flex;
    flex-direction: row;

    @include user-select(none);

    height: 100%;
    align-items: center;
    background: var(--menu-bar-background);
    border-radius: 5px;

    /* tmp fix for ultra small devices */
    overflow-y: visible;

    .divider {
        flex-grow: 0;
        flex-shrink: 0;

        border-left:2px solid var(--menu-bar-divider);
        height: calc(100% - 3px);
        margin: 3px;
    }

    .spacer {
        flex-grow: 1;
        flex-shrink: 1;

        min-width: 0;
    }
}

@media all and (max-width: 300px) {
    .controlBar.mode-channel-popout {
        .hideSmallPopout {
            display: none!important;
        }
    }
}