.menu-bar {
    position: relative;
}

.menu-bar.horizontal {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

.menu-bar.vertical {
    display: flex;
    flex-direction: column;
    width: max-content;
    align-items: center;
    overflow: auto;
}

.menu-bar-banner {
    display: flex;
    align-self: stretch;
    flex: 0 0 auto;
}

.menu-bar-title {
    align-self: center;
    padding: 0 1em;
    overflow: auto;
}

.menu-bar-spacer {
    display: none;
}

.menu-bar-container {
    display: flex;
    flex-wrap: wrap;
}

.menu-bar-container > .item {
    height: auto;
}

.menu-bar.horizontal > .menu-bar-container {
    flex-direction: row;
}

.menu-bar.vertical > .menu-bar-container {
    flex-direction: column;
}

.menu-bar-column {
    max-width: 100%;
    flex: 0 0 auto;
}

.menu-bar-column:only-child {
    flex: 1 1 auto;
}

.menu-bar-submenu-container {
    display: flex;
    flex-wrap: wrap;
}

.menu-bar-column-title {
    font-weight: bold;
    padding-bottom: var(--Padding2);
}

.menu-bar-column-separator {
    margin: 0;
}

@media (max-width: 575px) {

    .menu-bar {
        overflow: initial;
    }

    .menu-bar[x-popup-button].vertical  {
        width: 100%;
        flex-direction: row;
    }

    .menu-bar[x-popup-button] > .menu-bar-container {
        position: absolute;
        top: 100%;
        width: 100%;
        flex-direction: column;
        z-index: 1;
        border: var(--BorderSize) solid var(--ThmBorderColor);
    }

    .menu-bar[x-popup-button] > .menu-bar-container:not(.popup-open) {
        display: none;
    }

    .menu-bar[x-popup-button] .popup-content {
        border: var(--BorderSize) solid var(--ThmBorderColor);
    }

    .menu-bar[x-popup-button] .menu-bar-submenu-container {
        flex-direction: column;
    }

    .menu-bar-spacer {
        display: block;
        flex: 1 1 auto;
    }

}