/*
jquery-ui menubar by joedf
Started April 7th, 2025

menubar / filemenu that use jquery-ui menus and follows the theme

Inspired by the following
https://github.com/Barry127/fileMenu
https://codepen.io/seungjaeryanlee/pen/YYoGbp
*/
.menubar {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    
    box-sizing: border-box;
    list-style: none;
    padding: 0 0 0 5px;
    margin: 0;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    
    /* border-top: none !important; */
    border-left: none !important;
    border-right: none !important;
}

.menubar ul {
    display: none;
    position: absolute;
    padding: 0;
    margin: 0;
    list-style: none;
    min-width: 180px;
    font-weight: 300;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    border: 1px solid #ccc;
    border-radius: 0 0 6px 6px;
}
.menubar ul li:last-child div {
    border-radius: 0 0 5px 5px !important;
}

.menubar > li {
    display: inline-block;
    margin: 0;
}
.menubar > li > div {
    padding: .25em .5em !important;
    box-sizing: border-box;
    border: 1px solid transparent;
}
.menubar > li > div > .ui-menu-icon {
    /* hide top level caret icon */
    display: none;
}
.menubar > li > div.ui-state-active {
    /* top level active/selected styling */
    /* border: none; */
    /* border-top: none;
    border-bottom: none; */
    margin: 0;
}

.menubar input[type="checkbox"] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: .25em;
    margin: auto 0;
}