:root {
  /* Color */
  --surface: #c0c0c0;
  --button-highlight: #ffffff;
  --button-face: #dfdfdf;
  --button-shadow: #808080;
  --window-frame: #0a0a0a;
  --dialog-blue: #000080;
  --dialog-blue-light: #1084d0;

  /* Borders */
  --border-raised-outer: -0.5px -0.5px 0 0.5px var(--button-highlight),
    0 0 0 1px var(--window-frame);
  --border-raised-inner: inset -1px -1px var(--button-shadow),
    inset 1px 1px var(--button-face);
  --border-sunken-outer: -0.5px -0.5px 0 0.5px var(--window-frame),
    0 0 0 1px var(--button-highlight);
  --border-sunken-inner: inset -1px -1px var(--button-face),
    inset 1px 1px var(--button-shadow);
}

* {
  /* Hmmmm... how can I make these a webfont */
  font-family: "MS Sans Serif", Arial;
  font-size: 11px;
  -webkit-font-smoothing: none;
  color: #222222;
}

u {
  text-decoration: none;
  border-bottom: 0.5px solid #222222;
}

button {
  box-sizing: border-box;
  border: none;
  margin: 1px;
  background: var(--surface);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);

  min-width: 73px;
  min-height: 21px;
}

button:active {
  box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
}

button:focus {
  outline: 1px dotted #000000;
  outline-offset: -3.5px;
}

.dialog {
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
  background: var(--surface);
  padding: 1px;
}

.dialog .header {
  background: linear-gradient(
    90deg,
    var(--dialog-blue),
    var(--dialog-blue-light)
  );
  margin: 2px;
  padding: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog .header .title {
  font-weight: bold;
  color: white;
  letter-spacing: 0.1ch;
  margin-right: 24px;
}

.dialog .header .controls button {
  min-width: 14px;
  min-height: 12px;
}

.dialog .header .controls button:focus {
  outline: none;
}

.dialog .header .controls button[aria-label="Minimize"] {
  background-image: url("./minimize.svg");
  background-repeat: no-repeat;
  background-position: bottom 2px left 3px;
}

.dialog .header .controls button[aria-label="Maximize"] {
  background-image: url("./maximize.svg");
  background-repeat: no-repeat;
  background-position: top 1px left 2px;
}

.dialog .header .controls button[aria-label="Close"] {
  margin-left: 3px;
  background-image: url("./close.svg");
  background-repeat: no-repeat;
  background-position: top 2px center;
}

.dialog .body {
  margin: 12px 8px 8px;
}

.dialog .body > * + * {
  margin-top: 8px;
}

section.align-right {
  text-align: right;
}

section button + button {
  margin-left: 4px;
}

:disabled {
  color: var(--button-shadow);
  text-shadow: 1px 1px 0 var(--button-highlight);
}