/* Extracted from main.css: rules for src/menus/*.hx */

div.contextmenu {
    visibility: hidden;
    position: absolute;
    top: 100%;
    right: -8px;
    color: black;
    background-color: white;
    border-radius: 0px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 0px;
    padding-right: 0px;
    border: 1px solid black;
    margin-top: -4px;
    z-index: 11;
    text-align: left;
}

div.list-context-menu {
    /* Resting position only: list-menu-container has no positioned ancestor, so the
       inherited "top: 100%" from div.contextmenu resolves against the whole page and
       overflows past its bottom edge while hidden. show() always sets an inline top
       when actually opening the menu, so this override only affects the hidden state. */
    top: 0;
    right: auto;
    margin-top: -2px;
}

div.list-menu-container {
    z-index: 11;
}

div.app-menu-container {
    position: fixed;
    right: 0px;
    top: 56px;

    color: black;
    background-color: white;
    border-radius: 0px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 0px;
    padding-right: 0px;
    border: 1px solid black;

    z-index: 11;
    display: none;

    text-align: left;
    font-family: "Open Sans", "IBM Plex Sans", sans-serif;
	font-weight: bold;
}

div.background-menu {
    position: absolute;
    top: 200px;
    left: 200px;

    color: black;
    background-color: white;
    border-radius: 0px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 0px;
    padding-right: 0px;
    border: 1px solid black;

    z-index: 11;
    display: none;

    text-align: left;
    font-family: "Open Sans", "IBM Plex Sans", sans-serif;
	font-weight: bold;
	font-size: small;
}

div.menu-element {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 12px;
    padding-right: 12px;
    display: flex;
    align-items: center;
}

div.menu-element:hover {
    background-color: deepskyblue;
}

@media only screen and (max-width: 1024px) {
    div.menu-element {
        padding-top: 7px;
        padding-bottom: 7px;
    }
}

span.context-menu-shortcut {
    color: dodgerblue;
    text-align: right;
    width: 100%;
    font-variant: small-caps;
    font-size: 1em;
}