/**
 * @file jdmenubar css library.
 * @copyright Joel Midstjärna 2021
 */


:root {
    --jdmenu-bg-color: rgb(250,250,250);
    --jdmenu-border-color: rgb(200,200,200);
    --jdmenu-focus-color: rgb(235,235,235);
    --jdmenu-shortcut-color:rgb(100,100,100); /* Also for disabled items */
    --jdmenu-font-size: 15px;
    --jdmenu-font-family: Helvetica;
    --jdmenu-font-color: rgb(0,0,0);;
}

.jdmenu-bar {
    background-color: var(--jdmenu-bg-color);
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    user-select: none;
}

.jdmenu-item {
    display: flex;
    align-items : center;
    padding-left: 5px;
    padding-right: 5px;
    font-family: var(--jdmenu-font-family);
    font-size: var(--jdmenu-font-size);
    color: var(--jdmenu-font-color);
}

.jdmenu-item:hover {
    background-color: var(--jdmenu-focus-color);
    cursor: default;
}

.jdmenu-item-disabled {
    color: var(--jdmenu-shortcut-color);
    background-color: var(--jdmenu-bg-color);
}

.jdmenu-item-disabled:hover {
    background-color: var(--jdmenu-bg-color);
}

.jdmenu-bar > .jdmenu-item {
    display: inline-block;
}

.jdmenu-submenu {
    display: none;
    position: fixed;
    z-index: 5;
    background-color: var(--jdmenu-bg-color);
    border-color: var(--jdmenu-border-color);
    border-width: 1px;
    border-style: solid;
}

.jdmenu-submenu hr {
    border-top: 1px solid var(--jdmenu-border-color);
}

.jdmenu-item > span:nth-child(1) {
    margin-left: 0;
    width: calc(var(--jdmenu-font-size) * 1.25);
    font-size: calc(var(--jdmenu-font-size) * 0.66);
}

.jdmenu-item > span:nth-child(2) {
    padding-right: 20px;
}

.jdmenu-item > span:nth-child(3) {
    margin-left: auto;
    color: var(--jdmenu-shortcut-color);
}

.jdmenu-submenu-symbol {
    font-size: calc(var(--jdmenu-font-size) * 0.5);
}