/* Window control — interactive 30×30 hit area with a 15×15 signal circle. */
.window-control {
  --window-control-color: var(--window-control-neutral);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--window-control-size);
  width: var(--window-control-size);
  height: var(--window-control-size);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.window-control::before {
  content: "";
  position: absolute;
  width: var(--window-control-dot-size);
  height: var(--window-control-dot-size);
  border-radius: 50%;
  background: var(--window-control-color);
}

.window-control > .icon {
  position: relative;
  z-index: 1;
  width: var(--window-control-glyph-size);
  height: var(--window-control-glyph-size);
}

.window-control--danger { --window-control-color: var(--window-control-danger); }
.window-control--info { --window-control-color: var(--window-control-info); }
.window-control--success { --window-control-color: var(--window-control-success); }
.window-control--neutral { --window-control-color: var(--window-control-neutral); }

.window-control:hover:not(:disabled),
.window-control:focus-visible {
  color: #fff;
}

.window-control:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--window-control-color) 75%, white);
  outline-offset: -4px;
}

.window-control:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}