/* Licensed to the Chroma Control Contributors under one or more agreements. */
/* The Chroma Control Contributors licenses this file to you under the MIT license. */
/* See the LICENSE file in the project root for more information. */

.menu-bar-dropdown {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .menu-bar-dropdown.open > .menu-bar-dropdown-button-container > button {
        background: var(--background-color-inset);
    }

.menu-bar-dropdown-container {
    z-index: var(--foldout-z-index);
    position: relative;
    top: 27px;
}

.menu-bar-dropdown-foldout {
    position: absolute;
    min-width: 100%;
    pointer-events: all;
    color: var(--foreground-color-default);
    background: var(--background-color-muted);
    padding: var(--spacing-half) 0px;
}

.menu-bar-dropdown-button-container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-width: 0;
    position: relative;
    width: 100%;
    height: 100%;
}

.menu-bar-dropdown-button {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-family-sans-serif);
    font-size: var(--font-size);
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    overflow: hidden;
    padding: 0 var(--spacing);
    border: 0;
    color: var(--foreground-color-tertiary);
    background: transparent;
}

    .menu-bar-dropdown-button:hover {
        background: var(--background-color-inset);
    }

    .menu-bar-dropdown-button:active {
        color: var(--foreground-color-neutral);
        background: var(--background-color-inset);
    }
