@import "./menu-support.css" supports(not (background-color: light-dark(#000000, #ffffff)));
.menubar{
  list-style-type: none;
  padding-left: 0px;
  margin: 0px;
  display: block;
  background-color: light-dark(#808080A0, #333333A0);
}
.menubar::after{
  content: '';
  display: block;
  height: 0px;
  clear: both;
}
.menubar>li {
  position: relative;
  float: left;
}
.menubar input[type="text"] {
  border: 1px solid #a0a0a0;
  border-radius: 3px;
  background-color: transparent;
  text-align: left;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px 8px;
  width: 100%;
  height: 24px;
  box-sizing: border-box;
}

.contextmenu,
.dropdown,
.dropright{
  list-style-type: none;
  position: absolute;
  min-width: 240px;
  border: 1px solid #808080;
  border-radius: 5px;
  padding: 4px;
  background-color: light-dark(#ffffffA0, #333333A0);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.contextmenu{
  position: fixed;
  margin: 0px;
}
.dropdown{
  top: 100%;
  left: -5px;
}
.dropright{
  top: -5px;
  left: 100%;
  z-index: 1;
}
.dropdown>li,
.dropright>li {
  position: relative;
}
.sep {
  height: 0px;
  border: 1px solid transparent;
  border-bottom-color: #808080;
  margin: 0px 8px 1px;
}
button[role^="menuitem"] {
  border: none;
  border-radius: 3px;
  background-color: transparent;
  text-align: left;
  margin: 0px;
  padding: 0px 8px;
  width: 100%;
  height: 24px;
  white-space: nowrap;
}
button[role^="menuitem"]>.icon{
  margin-top: 4px;
}
button[role^="menuitem"]>.text{
  margin-inline-start: 6px;
  line-height: 24px;
  vertical-align: top;
}
button[role^="menuitem"]:focus,
button[role^="menuitem"]:hover {
  outline: none;
  background-color: light-dark(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.3));
}
[aria-expanded="false"]+.dropdown,
[aria-expanded="false"]+.dropright {
  display: none;
}
button[role][data-shortcut]::after{
  content: attr(data-shortcut) "";
  opacity: 0.3;
  position: absolute;
  top: 0px;
  right: 8px;
  line-height: 24px;
  font-family: sans-serif;
}
[role="menu"]>li>button[aria-haspopup="menu"]::after,
button[role="menuitemcheckbox"]::before,
button[role="menuitemradio"]::before,
button[aria-pressed][role="menuitem"]::before{
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
}
.contextmenu>li>button[aria-haspopup="menu"]::after,
.dropdown>li>button[aria-haspopup="menu"]::after{
  position: absolute;
  right: 4px;
  vertical-align: middle;
  background: url("./images/caret-right.svg") no-repeat center center;
}
button[role="menuitemcheckbox"]::before,
button[role="menuitemradio"]::before,
button[aria-pressed][role="menuitem"]::before{
  vertical-align: middle;
  margin-right: 6px;
}
button[role="menuitemcheckbox"][aria-checked="true"]::before,
button[role="menuitemradio"][aria-checked="true"]::before,
button[role="menuitem"][aria-pressed="true"]::before{
  background: url("./images/check.svg") no-repeat center center;
}
button[role="menuitemcheckbox"]:disabled::before,
button[role="menuitemradio"]:disabled::before,
button[aria-pressed][role="menuitem"]:disabled::before{
  opacity: 0.3;
}

@media (prefers-color-scheme: dark) {
  .dropdown>li>button[aria-haspopup="menu"]::after{
    background-image: url("./images/caret-right-dark.svg");
  }
  button[role="menuitemcheckbox"][aria-checked="true"]::before,
  button[role="menuitemradio"][aria-checked="true"]::before,
  button[role="menuitem"][aria-pressed="true"]::before{
    background-image: url("./images/check-dark.svg");
  }
}