.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  border: 3px solid var(--window-border);
  border-top: 0;
  border-radius: var(--window-radius);
  background: var(--window-body-bg);
  box-shadow: 2px 2px 6px rgb(0 0 0 / 0.4);
}

.window__titlebar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: var(--titlebar-height);
  margin: 0 -3px;
  padding: 0 5px 0 8px;
  border-radius: var(--window-radius);
  background: var(--titlebar-active);
  color: var(--titlebar-text);
  touch-action: none; /* a touch drag moves the window instead of scrolling the page */
}

.window__title {
  flex: 1;
  overflow: hidden;
  font-size: 13px;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 1px 1px #0f1089;
}

.window__controls {
  display: flex;
  flex-shrink: 0;
}

.window__close,
.window__minimize {
  position: relative;
  width: 21px;
  height: 21px;
  margin-left: 2px;
  padding: 0;
  border: 1px solid var(--close-button-border);
  border-radius: 3px;
}

.window__close {
  background: var(--close-button-bg);
}

.window__minimize {
  background: var(--minimize-button-bg);
}

/* Minimize glyph: a short bar at the bottom left. */
.window__minimize::before {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 7px;
  height: 3px;
  background: #fff;
}

/* The X is drawn with two rotated bars so no image asset is needed yet. */
.window__close::before,
.window__close::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 4px;
  width: 11px;
  height: 2px;
  background: #fff;
}

.window__close::before { transform: rotate(45deg); }
.window__close::after { transform: rotate(-45deg); }

.window__body {
  flex: 1;
  overflow: auto;
}

.window--inactive .window__titlebar {
  background: var(--titlebar-inactive);
}

.window--minimized {
  display: none;
}