/* Windows 7 Aero, rebuilt from aero.msstyles. Geometry measured from Microsoft's own
   Windows 7 screenshots at 96 dpi; see notes/aero-reference.md. */

@font-face {
  font-family: "Aero UI";
  src: local("Segoe UI"), local("SegoeUI");
}

:root {
  --aero: "Aero UI", "Segoe UI", Selawik, "Noto Sans", Tahoma, sans-serif;
  --frame: 8px;
  --caption: 30px;
}

.aero {
  font: 12px/1.25 var(--aero);
  color: #000;
}

/* Windows 7's own cursors on everything, so the pointer never switches to the host's. The
   32 px frames are used as PNGs: the .cur files lead with a 48 px frame, and Chrome
   restricts custom cursors over 32 px. */
.aero, .aero *, .aero *::before, .aero *::after { cursor: url("../cursors/aero_arrow.png") 0 0, default; }
.aero a, .aero .link, .aero .logon-tile { cursor: url("../cursors/aero_link.png") 4 0, pointer; }
.aero input[type="text"], .aero textarea { cursor: text; }

/* ---------- window frame ---------- */

/* Paint order, bottom to top. The client covers the frame's innermost pixel, and the
   outline crosses the caption buttons' top row. */
.win > .shadow { z-index: 0; }
.win > .glass { z-index: 1; }
.win > .reflect { z-index: 2; }
.win > .corner { z-index: 3; }
.win > .buttons { z-index: 5; }
.win > .frame { z-index: 6; }
.win > .client { z-index: 7; }
.win > .caption { z-index: 8; }

.win {
  position: absolute;
  isolation: isolate;
}
.win > .glass,
.win > .reflect,
.win > .corner,
.win > .frame,
.win > .shadow,
.win > .caption,
.win > .buttons {
  position: absolute;
  pointer-events: none;
}

.win > .glass {
  inset: 0;
  border-radius: 7px 7px 5px 5px;
  backdrop-filter: url(#aero-glass);
}
@supports not (backdrop-filter: url(#x)) {
  .win > .glass {
    backdrop-filter: blur(6px) saturate(0.55) brightness(1.02);
    background: rgba(116, 184, 252, 0.28);
  }
}

/* The streaks are stretched over the whole screen, so they stay put while windows move.
   Opacity fitted to Windows 7's Control Panel screenshot; inactive keeps the theme's 90:75. */
.win > .reflect {
  inset: 0;
  border-radius: 7px 7px 5px 5px;
  background: url("../aero/reflection.png") 0 0 / 100vw 100vh fixed;
  opacity: 0.25;
}
.win.inactive > .reflect { opacity: 0.21; }

.win > .corner {
  left: 0;
  top: 0;
  width: 228px;
  height: 175px;
  max-width: 100%;
  max-height: 100%;
  background: url("../aero/highlightcorner-1.png") no-repeat;
  opacity: 0.75;
  border-top-left-radius: 7px;
}
.win.inactive > .corner { background-image: url("../aero/highlightcorner-2.png"); }

/* frame-*.png are the atlas pieces cut to Windows 7's 8 px border (tools/build_assets.py).
   Each keeps a 1 px filtering gutter on its outer edge, so it starts a pixel outside the
   window and that pixel is clipped off. */
.win > .frame { clip-path: inset(1px); }
.win > .frame.t {
  left: -1px;
  right: -1px;
  top: -1px;
  height: calc(var(--caption) + 2px);
  border-image: url("../aero/frame-t-1.png") 8 9 3 9 fill / 8px 9px 3px 9px stretch;
}
.win > .frame.b {
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: calc(var(--frame) + 2px);
  border-image: url("../aero/frame-b-1.png") 3 9 6 9 fill / 3px 9px 6px 9px stretch;
}
.win > .frame.l,
.win > .frame.r {
  top: calc(var(--caption) - 1px);
  bottom: calc(var(--frame) - 1px);
  width: calc(var(--frame) + 2px);
  border-image: url("../aero/frame-l-1.png") 0 fill / 0 stretch;
}
.win > .frame.l { left: -1px; }
.win > .frame.r { right: -1px; border-image-source: url("../aero/frame-r-1.png"); }
.win.inactive > .frame.t { border-image-source: url("../aero/frame-t-2.png"); }
.win.inactive > .frame.b { border-image-source: url("../aero/frame-b-2.png"); }
.win.inactive > .frame.l { border-image-source: url("../aero/frame-l-2.png"); }
.win.inactive > .frame.r { border-image-source: url("../aero/frame-r-2.png"); }

/* The shadow bitmaps have the same gutter on their inner edge, tucked under the window and
   clipped. The top and bottom pieces span the side shadows' visible widths so their tapered
   ends round the corners; 95% opacity is fitted to the Control Panel screenshot. */
.win > .shadow { opacity: 0.95; }
.win > .shadow.t {
  left: -15px;
  right: -21px;
  bottom: calc(100% - 1px);
  height: 16px;
  clip-path: inset(0 0 1px 0);
  border-image: url("../aero/topshadow-1.png") 0 28 0 28 fill / 0 28px 0 28px stretch;
}
.win > .shadow.b {
  left: -15px;
  right: -21px;
  top: calc(100% - 1px);
  height: 22px;
  clip-path: inset(1px 0 0 0);
  border-image: url("../aero/bottomshadow-1.png") 0 29 0 30 fill / 0 29px 0 30px stretch;
}
.win > .shadow.l {
  right: calc(100% - 1px);
  top: 0;
  bottom: 0;
  width: 16px;
  clip-path: inset(0 1px 0 0);
  border-image: url("../aero/leftshadow-1.png") 17 0 17 0 fill / 17px 0 17px 0 stretch;
}
.win > .shadow.r {
  left: calc(100% - 1px);
  top: 0;
  bottom: 0;
  width: 22px;
  clip-path: inset(0 0 0 1px);
  border-image: url("../aero/rightshadow-1.png") 17 0 17 0 fill / 17px 0 17px 0 stretch;
}
.win.inactive > .shadow.t { border-image-source: url("../aero/topshadow-2.png"); }
.win.inactive > .shadow.b { border-image-source: url("../aero/bottomshadow-2.png"); }
.win.inactive > .shadow.l { border-image-source: url("../aero/leftshadow-2.png"); }
.win.inactive > .shadow.r { border-image-source: url("../aero/rightshadow-2.png"); }

.win > .client {
  position: absolute;
  left: var(--frame);
  top: var(--caption);
  right: var(--frame);
  bottom: var(--frame);
  background: #f0f0f0;
  overflow: auto;
}
.win > .client.white { background: #fff; }

/* ---------- caption ---------- */

.win > .caption {
  left: var(--frame);
  right: 112px;
  top: 0;
  height: var(--caption);
  display: flex;
  align-items: center;
  white-space: nowrap;
}
/* The glow spills 17px past the text, so the ellipsis clip lives on the inner span. */
.win > .caption .title {
  position: relative;
  top: -1px;
  min-width: 0;
  line-height: 15px;
}
.win > .caption .title > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win > .caption .title::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -17px;
  right: -17px;
  top: -8px;
  bottom: -10px;
  border-image: url("../aero/textglow.png") 17 25 18 24 fill / 17px 25px 18px 24px stretch;
}
.win > .caption .icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

/* ---------- caption buttons ---------- */

/* The buttons sit under the frame outline, which crosses their top row, and Windows clips
   their face by a pixel on the left, right and bottom. Neighbours share an outline pixel,
   hence the 3 px overlap. The hover glow is a border-image
   outset around the button so it can spill past that clip. States: 1 normal, 2 hot,
   3 pressed; inactive windows only differ in the normal state. */
.win > .buttons {
  top: 0;
  right: 5px;
  height: 22px;
  display: flex;
  pointer-events: auto;
}
.win .cbtn {
  position: relative;
  height: 22px;
  margin-left: -3px;
}
.win .cbtn:first-child { margin-left: 0; }
.win .cbtn::before,
.win .cbtn::after {
  content: "";
  position: absolute;
  inset: 0;
}
.win .cbtn::before {
  border-image: var(--face) 6 12 8 12 fill / 6px 12px 8px 12px stretch;
  clip-path: inset(0 1px 1px 1px);
}
.win .cbtn.close::before {
  border-image-slice: 6 20 8 20 fill;
  border-image-width: 6px 20px 8px 20px;
}
.win .cbtn::after { background: var(--glyph) no-repeat var(--gx) 4px; }

/* Widths and glyph offsets measured from Windows 7's Control Panel: minimize is drawn a
   pixel wider than its bitmap and maximize a pixel narrower. */
.win .cbtn.min { width: 32px; --gx: 11px; --face: url("../aero/captionend-active-1.png"); --glyph: url("../aero/glyph-min-1.png"); }
.win .cbtn.max { width: 30px; --gx: 7px; --face: url("../aero/caption-active-1.png"); --glyph: url("../aero/glyph-max-1.png"); }
.win .cbtn.close { width: 51px; --gx: 20px; --face: url("../aero/close-active-1.png"); --glyph: url("../aero/glyph-close-1.png"); }
.win .cbtn.close.alone { --face: url("../aero/closealone-active-1.png"); }
.win.inactive .cbtn.min { --face: url("../aero/captionend-inactive-1.png"); }
.win.inactive .cbtn.max { --face: url("../aero/caption-inactive-1.png"); }
.win.inactive .cbtn.close { --face: url("../aero/close-inactive-1.png"); }
.win.inactive .cbtn.close.alone { --face: url("../aero/closealone-inactive-1.png"); }

.win .cbtn.min:hover { --face: url("../aero/captionend-active-2.png"); }
.win .cbtn.max:hover { --face: url("../aero/caption-active-2.png"); }
.win .cbtn.close:hover { --face: url("../aero/close-active-2.png"); }
.win .cbtn.close.alone:hover { --face: url("../aero/closealone-active-2.png"); }
.win .cbtn.min:active { --face: url("../aero/captionend-active-3.png"); }
.win .cbtn.max:active { --face: url("../aero/caption-active-3.png"); }
.win .cbtn.close:active { --face: url("../aero/close-active-3.png"); }
.win .cbtn.close.alone:active { --face: url("../aero/closealone-active-3.png"); }

.win .cbtn:hover { border-image: url("../aero/glow.png") 8 9 7 9 fill / 8px 9px 7px 9px / 9px 9px; }
.win .cbtn.close:hover { border-image: url("../aero/closeglow.png") 8 8 7 9 fill / 8px 8px 7px 9px / 9px 7.5px; }