/* ------------------------------------------------------------------
   window.css - the 4Dwm window frame.

   Measured from a screenshot of IRIX 6.5. Going from the outside in, a
   window is a 1px black outline, a dithered light bevel, the khaki
   frame face, a dithered dark bevel, another black outline, and then
   the title bar and the client area.

   The dithered bevel is the texture the desktop is known for. It is
   drawn with the 2x2 patterns from js/core/dither.js, laid along each
   edge as four background strips.
   ------------------------------------------------------------------ */

#windows {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The four strips: light along the top and the left, dark along the
   bottom and the right. Anything wearing a frame repeats this block
   with its own pair of patterns. */
.win,
.win-title,
.tb-btn,
.shelf-item {
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-position: 0 0, 0 0, 0 100%, 100% 0;
  background-size: 2px 2px;
  image-rendering: pixelated;
}

.win {
  position: absolute;
  pointer-events: auto;
  padding: var(--frame);
  border: 1px solid #000;
  min-width: 180px;
  min-height: 90px;
  background-color: var(--title-a);
  background-image: var(--dither-lt), var(--dither-lt), var(--dither-dk), var(--dither-dk);
  /* The two tones of the notches in the frame; see below. */
  --notch-dk: var(--title-dk);
  --notch-lt: var(--title-lt);
  --notch-up: linear-gradient(90deg, var(--notch-dk) 0 1px, var(--notch-lt) 1px 2px);
  --notch-flat: linear-gradient(180deg, var(--notch-dk) 0 1px, var(--notch-lt) 1px 2px);
}

/* An unfocused window keeps the same shape but drops to plain grey. */
.win.blur,
.win.blur .win-title,
.win.blur .tb-btn {
  background-color: var(--title-off-a);
  background-image:
    var(--dither-off-lt), var(--dither-off-lt),
    var(--dither-off-dk), var(--dither-off-dk);
}

.win.blur {
  --notch-dk: var(--title-off-dk);
  --notch-lt: var(--title-off-lt);
}

.win.minimized {
  display: none;
}

/* --- Frame notches ---------------------------------------------------
   4Dwm cuts a short groove across the frame 31 pixels in from every
   corner. The groove marks where the corner grip ends and the edge grip
   begins, and it is one of the marks that says "this is Motif". Each
   one is two pixels: the dark tone on the top or the left side, the
   light tone on the other, the same way round as every other bevel.

   All eight are drawn as background layers on one overlay, so they cost
   no extra elements and no extra work when the window is dragged. */

.win::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    /* top edge, then bottom edge: an upright groove */
    var(--notch-up), var(--notch-up), var(--notch-up), var(--notch-up),
    /* left edge, then right edge: a flat groove */
    var(--notch-flat), var(--notch-flat), var(--notch-flat), var(--notch-flat);
  background-size:
    2px var(--frame), 2px var(--frame), 2px var(--frame), 2px var(--frame),
    var(--frame) 2px, var(--frame) 2px, var(--frame) 2px, var(--frame) 2px;
  background-position:
    30px 0, calc(100% - 30px) 0,
    30px 100%, calc(100% - 30px) 100%,
    0 30px, 0 calc(100% - 30px),
    100% 30px, 100% calc(100% - 30px);
}

/* --- Spawning --------------------------------------------------------
   A slow X server painted a new window in bands, from the left edge to
   the right one, and the program only drew its contents once the frame
   was there. js/wm/manager.js walks --wipe from 100% down to 0% and
   then takes the class off. */

.win.painting {
  clip-path: inset(0 var(--wipe, 100%) 0 0);
}

.win.painting .win-body > * {
  visibility: hidden;
}

/* --- Resize grips --------------------------------------------------
   Eight invisible strips laid over the frame. A corner grip reaches as
   far as the notch in the frame, which is what the notch is there to
   mark, and the edge grips take the rest.

   The cursor for each one is set in css/base.css, with the rest of the
   SGI cursor set. */

/* The grips sit under the client area, not over it. A corner grip is a
   square, but the part of it the pointer can reach is only the bend of
   the frame around the corner: the client area covers the rest. This is
   why a corner grip can be large without swallowing the clicks meant
   for the title bar. */
.win-grip {
  position: absolute;
  z-index: 0;
}

.win-grip-n  { top: -2px; left: 31px; right: 31px; height: 9px; }
.win-grip-s  { bottom: -2px; left: 31px; right: 31px; height: 9px; }
.win-grip-w  { left: -2px; top: 31px; bottom: 31px; width: 9px; }
.win-grip-e  { right: -2px; top: 31px; bottom: 31px; width: 9px; }
.win-grip-nw { top: -2px; left: -2px; width: 33px; height: 33px; }
.win-grip-ne { top: -2px; right: -2px; width: 33px; height: 33px; }
.win-grip-sw { bottom: -2px; left: -2px; width: 33px; height: 33px; }
.win-grip-se { bottom: -2px; right: -2px; width: 33px; height: 33px; }

/* --- Client area ---------------------------------------------------- */

.win-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--face);
  border: 1px solid #000;
}

.win-body {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: var(--face);
  border-top: 1px solid #000;
}

/* --- Title bar ------------------------------------------------------
   The title is bold italic, black, and left aligned. The three frame
   buttons are raised widgets that fill the height, so the gaps between
   them read as grooves. */

.win-title {
  height: var(--title-h);
  flex: none;
  display: flex;
  align-items: stretch;
  background-color: var(--title-a);
  background-image: var(--dither-lt), var(--dither-lt), var(--dither-dk), var(--dither-dk);
}

.tb-label span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tb-label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: bold;
  font-style: italic;
  color: var(--ink);
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The three buttons are square, they fill the whole height of the title
   bar and they touch each other. There is no gap: what looks like a
   groove between two of them is the dark edge of one meeting the light
   edge of the next. */
.tb-btn {
  flex: none;
  align-self: stretch;
  margin: 0;
  padding: 0;
  width: 24px;
  position: relative;
  border: 0;
  background-color: var(--title-a);
  background-image: var(--dither-lt), var(--dither-lt), var(--dither-dk), var(--dither-dk);
}

/* Pressing a button swaps the light and the dark edges. */
.tb-btn:active {
  background-position: 0 100%, 100% 0, 0 0, 0 0;
}

/* All three marks are the same drawing at three sizes: a one pixel
   black outline with the frame colour inside it, and a one pixel black
   shadow down the right and along the bottom. The sizes and the offsets
   below were read pixel by pixel out of design/motif-window.png. */
.tb-btn::before {
  content: "";
  position: absolute;
  border: 1px solid #000;
  box-shadow: 1px 1px 0 #000;
  /* The reset at the top of base.css uses the * selector, which picks
     up elements but not the boxes drawn by ::before. Without this line
     the outline is added to the sizes below and every mark comes out
     two pixels too wide and two pixels too tall. */
  box-sizing: border-box;
}

/* Window menu: a short wide bar, 16 by 4. */
.tb-menu::before {
  left: 4px;
  top: 9px;
  width: 16px;
  height: 4px;
}

/* Minimize: a very small square, 4 by 4. */
.tb-min::before {
  left: 9px;
  top: 9px;
  width: 4px;
  height: 4px;
}

/* Maximize: a tall square, 14 by 16. */
.tb-max::before {
  left: 5px;
  top: 3px;
  width: 14px;
  height: 16px;
}

/* --- Drag outline ---------------------------------------------------
   4Dwm moved and resized windows with a wire frame, not a live
   preview. The outline follows the pointer and the window jumps to it
   when the button is released. */

#drag-outline {
  position: absolute;
  z-index: 7000;
  pointer-events: none;
  border: 2px solid #ffffff;
  mix-blend-mode: difference;
}

/* --- Minimized windows -----------------------------------------------
   A minimized window becomes a small picture of itself in a raised grey
   box, with the window name under it. The boxes stand in a row to the
   right of the Toolchest, not under it. See design/minim.png.

   js/wm/manager.js sets the left and the top edge, because both depend
   on how tall and how wide the Toolchest turns out to be. */

#shelf {
  position: absolute;
  z-index: 8;
  display: flex;
  flex-direction: row;
  gap: 6px;
  pointer-events: none;
}

.shelf-item {
  pointer-events: auto;
  width: 97px;
  padding: 3px;
  background: var(--minim-face);
  border: 2px solid;
  border-color: var(--minim-lt) var(--minim-dk) var(--minim-dk) var(--minim-lt);
}

.shelf-item:active {
  border-color: var(--minim-dk) var(--minim-lt) var(--minim-lt) var(--minim-dk);
}

.shelf-item img {
  display: block;
  width: 100%;
  height: 70px;
  object-fit: fill;
  border: 2px solid;
  border-color: var(--minim-dk) var(--minim-lt) var(--minim-lt) var(--minim-dk);
}

/* The groove that sets the name apart from the picture. */
.shelf-item .name {
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px solid var(--minim-dk);
  box-shadow: inset 0 1px 0 var(--minim-lt);
  font-family: var(--font-label);
  font-size: 11px;
  line-height: 14px;
  color: var(--ink);
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}