src/css/desktop/window/overlay.css
window.window:not(.overlay) div.overlay-wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: var(--darkened-overlay-alt);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 150;
}

window.window:not(.overlay) div.overlay-wrapper * {
  pointer-events: none;
}

window.window:not(.overlay) div.overlay-wrapper.show * {
  pointer-events: initial;
}

window.window:not(.overlay) div.overlay-wrapper.show {
  opacity: 1;
  visibility: visible;
  pointer-events: initial;
}

window.window.overlay {
  display: block;
  position: static;
  pointer-events: none;
}

window.window.overlay div.body {
  margin-top: 0px !important;
  width: 100%;
  height: 100% !important;
  overflow: hidden;
}

window.window.overlay div.body div.overlay-head {
  margin: 0;
  margin-bottom: 10px;
  padding: 0 5px;
}

window.window.overlay div.body div.overlay-head h2.header {
  margin: 0;
  margin-bottom: 2px;
  font-size: 18px;
}

window.window.overlay div.body div.overlay-head p.subheader {
  margin: 0;
  opacity: 0.6;
}

window.window.overlay.visible {
  pointer-events: initial;
}

window.window.overlay button.overlay-close.material-icons-round {
  background-color: transparent !important;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--fg);
  font-size: 15px;
}

window.window.overlay button.overlay-close.material-icons-round:hover {
  opacity: 0.7;
}

window.window.overlay button.overlay-close.material-icons-round:active {
  opacity: 0.4;
}
