/* dropdown_menu.css

Dropdown menu CSS definitions.

CSS classes:

    *.menu                      -- root element, contains a single <ul>
    ul.menu-root-list           -- the root <ul> in .menu

    ul.menu-list                -- ul is either a vertical or a horizontal list
    ul.menu-list-vertical       -- ul is a vertical list
    ul.menu-list-horizontal     -- ul is a horizontal list
    ul.menu-list-visible        -- optional, ul is visible when it has this class

    (span|a).menu-elem          -- elem ("span" or "a" tag) is either a topic or an item
    (span|a).menu-elem-topic    -- elem is a topic
    (span|a).menu-elem-item     -- elem is an item
    (span|a).menu-elem-disabled -- optional, elem is disabled when it has this class
    span.menu-elem-submenu      -- indicates that elem (topic or item) contains a list of subitems

    em.menu-item-checkbox       -- the left-aligned checkbox of some span or a
    em.menu-item-label          -- contains text content of some span or a
    em.menu-item-rightarrow     -- the right-aligned arrow of some span or a
    span.menu-item-clickable    -- item is clickable unless disabled
*/

.menu {
    visibility: hidden;
}

.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--menu-background);
    z-index: 1;
}

.menu li {
    position: relative;
}

.menu hr {
    border: none;
    height: 1px;
    margin: 0;
    color: var(--menu-text-hover-background);
    background: var(--menu-text-hover-background);
}

.menu .menu-root-list {
    display: flex;
    user-select: none;
    background: var(--menu-background);
}

/* Lists */

.menu .menu-list {
    /* all lists (horizontal and vertical) */
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 160px;
    border: 1px solid var(--menu-border-color);
}

.menu .menu-list-horizontal {
    left: 100%;
    top: 0;
}

.menu .menu-list-visible {
    /* any visible list (horizontal or vertical) */
    display: inline-block;
    visibility: visible;
    opacity: 1;
}

/* Elements: span and a elements representing topics and items */

.menu .menu-elem {
    /* all menu topics and items */
    display: inline-block;
    padding: 8px;
    color: var(--menu-text-color);
    white-space: nowrap;
    text-decoration: none;
}

.menu .menu-elem:not(.menu-elem-disabled):hover {
    /* any enabled menu topic or item in hover state */
    color: var(--menu-text-hover-color);
    background: var(--menu-text-hover-background);
}

.menu .menu-elem-topic {
    /* all menu topics */
    padding-right: 10px;
}

.menu .menu-elem-topic.menu-elem-submenu:after {
    /* any menu topic that represents a submenu */
    /* unicode symbol U+2BC6: BLACK MEDIUM DOWN-POINTING TRIANGLE CENTRED */
    content: " \2BC6";
}

.menu .menu-elem-item {
    /* all menu items */
    display: grid;
    grid-template-columns: 18px auto 12px;
}

.menu .menu-elem-item em {
    /* all menu item decorations */
    font-style: normal;
}

.menu .menu-elem-disabled {
    /* any disabled menu item */
    cursor: default;
    color: var(--menu-text-disabled-color);
    background: var(--menu-background);
}

.menu .menu-elem-disabled:hover {
    /* any disabled menu item in hover state */
    background: var(--menu-disabled-hover-background);
}

.menu .menu-elem-disabled.plaintext {
    cursor: default;
    color: #40e8e8;
    background: var(--menu-background);
    text-align: right;
    width: 100%;
}

/* Items */

.menu .menu-item-checkbox {
    visibility: hidden;
    font-weight: bold;
    pointer-events: none;
}
.menu .menu-item-checkbox.checked {
    visibility: visible;
}
.menu .menu-item-checkbox:after {
    /* unicode symbol U+2713: CHECK MARK */
    content: "\2713";
}

.menu .menu-item-rightarrow {
    pointer-events: none;
}
.menu .menu-elem-submenu .menu-item-rightarrow:after {
    /* show right-arrow at menu items that represent submenus */
    /* unicode symbol U+2BC8: BLACK MEDIUM RIGHT-POINTING TRIANGLE CENTRED */
    content: " \2BC8";
}

.menu .menu-item-clickable:not(.menu-elem-disabled) {
    /* enabled and clickable menu item */
    cursor: pointer;
}