.context-menu,
.sub-menu {
  position: fixed;
  /* background-color: #f2f2f3; */
  background-color: var(--window-background);
  background-clip: padding-box;
  border-radius: var(--box-border-radius);
  border: 1px inset rgb(0, 0, 10, .1);
  padding: 10px;
  box-shadow: 6px 6px 12px 0px rgba(0, 0, 0, .3);
  z-index: 1000000000;
  user-select: none;
  overflow: hidden;
}

html.glass.dark .context-menu,
html.glass.dark .sub-menu {
  border: 1px inset rgba(0, 0, 0, .4);
}

html.glass .context-menu::after,
html.glass .sub-menu::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  contain: layout;
  backdrop-filter: blur(var(--box-blur));
  z-index: -1;
  pointer-events: none;
}

.context-menu-inner {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.context-menu:focus,
.context-menu :focus {
  /* outline: 2px solid blue; */
  outline: 0;
}

.menu-item {
  position: relative;
  height: 28px;
  white-space: nowrap;
  cursor: default;
  line-height: 0;
  display: flex;
  align-items: center;
  border-radius: var(--box-border-radius);
}

.menu-item.disabled {
  color: var(--text-disabled);
}

.menu-item.disabled svg.svg-fill {
  fill: var(--text-disabled);
}

.window-titlebar-context-icon svg.svg-fill {
  fill: var(--window-icon-color);
  width: 9px;
  height: 9px;
}

/* .menu-item.disabled:focus {
  background-color: #ddd;
} */

/* .menu-item:hover {
	background-color: rgb(217, 229, 255);
} */

.menu-item.active:not(.disabled),
.menu-item:focus:not(.disabled) {
  background-color: var(--hover-bg-color);
}

.menu-item-icon {
  width: 32px;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: 50% 50%;
}

.menu-item-icon svg.svg-stroke {
  stroke: var(--window-icon-color);
}

.menu-item.checked .menu-item-icon {
  font-weight: bold;
  font-size: 12px;
}

.menu-item-text {
  flex-basis: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  min-width: 160px;
  max-width: 400px;
  padding-left: 6px;
  padding-right: 10px;
  font-size: 12px;
  letter-spacing: .2px;
  overflow: hidden;
}

.context-menu.has-shortcut .menu-item-text,
.sub-menu.has-shortcut .menu-item-text {
  min-width: 120px;
}

.menu-item.emphasis>.menu-item-text {
  font-weight: bold;
}

.menu-item-shortcut {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 12px;
  font-size: 12px;
  text-align: right;
  line-height: normal;
  color: var(--label-color);
}

.menu-item:not(.disabled):focus>.menu-item-shortcut {
  color: var(--primary-text-color);
}

.menu-item-arrow {
  flex-grow: 1;
  flex-shrink: 0;
  width: 26px;
  height: 100%;
  font-size: 12px;
  display: flex;
  align-items: center;
}

.menu-item-arrow svg {
  width: 16px;
  height: 16px;
}

.sub-menu {
  display: none;
}

.sub-menu.show {
  display: initial;
}

.menu-item-divider {
  width: 100%;
  height: 1px;
  background-color: var(--border-color);
  margin: 3px 0;
}

.context-menu-scroll-button {
  display: none;
  position: absolute;
  width: 100%;
  height: 22px;
  background-color: #f2f2f3;
  z-index: 2;
}

.context-menu-scroll-button.top {
  top: 0;
}

.context-menu-scroll-button.bottom {
  bottom: 0;
}

.context-menu-scroll-button.show {
  display: initial;
}

.context-menu-scroll-button svg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.drag-item {
  position: fixed !important;
  z-index: 10000001 !important;
  pointer-events: none !important;
}