/* Internet Explorer 6 (XP SP3) in Luna. The chrome is drawn with luna.msstyles parts sliced by the
   SizingMargins of NormalBlue.ini, and IE's own bitmaps; tools/build_ie_assets.py says which is which. */

.ie-root {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--face);
}
.maximized .ie-root { width: auto; height: auto; }

/* [Rebar] ToolbarBackground.bmp, Stretch, SizingMargins 0, 0, 0, 4; bands with etched borders
   ([Rebar.Band] EdgeShadowColor 216 210 189). Toolbars are locked, as XP SP2 shipped them: no grippers. */
.ie-rebar {
  flex: none;
  border-style: solid;
  border-width: 0 0 4px;
  border-image: url(../assets/ie/rebar.png) 0 0 4 fill stretch;
}
.ie-row { display: flex; align-items: center; position: relative; }
.ie-row + .ie-row { border-top: 1px solid #d8d2bd; box-shadow: inset 0 1px #fff; padding-top: 1px; }
.band-label { color: #7f7c73; padding: 0 5px 0 4px; white-space: nowrap; }   /* [Rebar] TextColor */

/* The menu band (the Solitaire menu bar's code and popups) and the brand band with the throbber. */
.ie-menurow { height: 22px; }
.ie .menubar { flex: 1; height: 22px; background: none; border: 0; box-shadow: none; padding-left: 2px; z-index: auto; }
.ie .menubar .mtop { padding: 4px 6px 0; height: 21px; margin-top: 1px; }
.ie-brand {
  flex: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #d8d2bd;
  box-shadow: inset 1px 0 #fff;
  padding-left: 2px;
  background: #fff content-box;
}
.ie-throbber { width: 22px; height: 22px; background: url(../assets/ie/throbber22.png) 0 0 no-repeat; }

/* Standard Buttons: 24px images from shell32 (204 normal, 205 hot), text on the right of some. */
.ie-tbrow { height: 39px; padding: 1px 2px 0; }
.tgroup { display: flex; height: 36px; }
.tbtn, .tdd {
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  border: 4px solid transparent;
  background: none;
  font: 11px var(--ui-font);
  color: #000;
  cursor: default;
  white-space: nowrap;
}
.tbtn { padding: 0 2px; }
.tbtn:focus, .tdd:focus, .ie-combo .dd:focus, .ie-links .chev:focus { outline: none; }   /* toolbars show no focus */
.tbtn.text { padding-right: 5px; }
.tbtn i { width: 24px; height: 24px; flex: none; background: url(../assets/ie/tb24.png) calc(var(--i) * -24px) 0 no-repeat; }
.tbtn:hover i, .tgroup.split:hover .tbtn i { background-image: url(../assets/ie/tb24-hot.png); }
/* [Toolbar.Button] SizingMargins 4: hot, pressed. */
.tbtn:hover { border-image: url(../assets/ie/tbbtn-hot.png) 4 fill stretch; }
.tbtn:active { border-image: url(../assets/ie/tbbtn-pressed.png) 4 fill stretch; }
.tbtn:active i { transform: translate(1px, 1px); }
.tbtn.drop .glyph, .tdd .glyph { width: 5px; height: 3px; background: url(../assets/ie/tbddglyph.png) 0 0 no-repeat; }
.tbtn.drop .glyph { margin-left: 2px; }
/* Back and Forward: [Toolbar.SplitButton] (SizingMargins 4, 2, 4, 4) + [Toolbar.SplitButtonDropdown] (2, 4, 4, 4). */
.tgroup.split .tbtn { border-right-width: 2px; }
.tdd { width: 13px; padding: 0; justify-content: center; border-left-width: 2px; }
.tgroup.split:hover .tbtn { border-image: url(../assets/ie/tbsplit-hot.png) 4 2 4 4 fill stretch; }
.tgroup.split:hover .tdd { border-image: url(../assets/ie/tbsplitdd-hot.png) 4 4 4 2 fill stretch; }
.tgroup.split .tbtn:active { border-image: url(../assets/ie/tbsplit-pressed.png) 4 2 4 4 fill stretch; }
.tgroup.split .tdd:active { border-image: url(../assets/ie/tbsplitdd-pressed.png) 4 4 4 2 fill stretch; }
.tgroup.disabled { pointer-events: none; }
.tgroup.disabled .tbtn { color: var(--shadow); }
.tgroup.disabled i { filter: grayscale(1) contrast(0.6) brightness(1.18); opacity: 0.55; }
.tgroup.disabled .glyph { opacity: 0.35; }
/* [Toolbar.Separator] Separator.bmp, tiled. */
.tsep { width: 8px; height: 28px; margin: 0 1px; background: url(../assets/ie/tbsep.png) 0 0 repeat-y; }

/* Address bar: [Combobox] BorderFill 127 157 185 with [Combobox.DropDownButton], the Go button, Links. */
.ie-addrrow { height: 25px; padding: 0 2px 1px 0; }
.ie-combo {
  flex: 1 1 auto;
  min-width: 60px;
  height: 22px;
  display: flex;
  align-items: center;
  border: 1px solid #7f9db9;
  background: #fff;
}
.ie-combo img { width: 16px; height: 16px; margin: 0 3px 0 2px; flex: none; }
.ie-combo input {
  flex: 1;
  min-width: 0;
  height: 18px;
  border: 0;
  padding: 0;
  outline: none;
  font: 11px var(--ui-font);
  color: #000;
  background: none;
  -webkit-user-select: text;
  user-select: text;
}
.ie-combo .dd { flex: none; width: 17px; height: 20px; border: 0; padding: 0; background: url(../assets/ie/combo.png) 0 0 no-repeat; }
.ie-combo .dd:hover { background-position: 0 -20px; }
.ie-combo .dd:active { background-position: 0 -40px; }
.tbtn.go { height: 24px; margin-left: 2px; padding: 0 4px 0 0; border-width: 2px 4px 2px 2px; gap: 4px; }
.tbtn.go i { width: 20px; height: 20px; background: url(../assets/ie/go.png) 0 0 no-repeat; }
.tbtn.go:hover i { background-image: url(../assets/ie/go-hot.png); }
.ie-links {
  flex: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  margin-left: 2px;
  border-left: 1px solid #d8d2bd;
  box-shadow: inset 1px 0 #fff;
  padding-left: 1px;
}
.ie-links .chev {
  width: 18px;
  height: 17px;
  border: 4px solid transparent;
  padding: 0;
  background: url(../assets/ie/chevron.png) center 0 no-repeat content-box;   /* 6 states of 9px */
}
.ie-links .chev:hover { border-image: url(../assets/ie/tbbtn-hot.png) 4 fill stretch; }

/* The page. MSHTML drew a 2px inset edge around the document. */
.ie-view { flex: 1 1 auto; min-height: 0; position: relative; border: 1px solid; border-color: #aca899 #fff #fff #aca899; }
.ie-view-in { position: absolute; inset: 0; border: 1px solid; border-color: #716f64 #f1efe2 #f1efe2 #716f64; background: #fff; }
.ie-view iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.dragging .ie-view iframe { pointer-events: none; }

/* [Status] StatusBackground.bmp (Tile, SizingMargins 50, 17, 5, 9), [Status.Pane] StatusPane.bmp
   (SizingMargins 0, 2, 2, 2), [ScrollBar.SizeBox] ResizeGrip2.bmp. */
.ie-status {
  flex: none;
  height: 22px;
  display: flex;
  align-items: stretch;
  position: relative;
  padding: 3px 0 1px 2px;
  isolation: isolate;
}
.ie-status::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-style: solid;
  border-width: 5px 17px 9px 50px;
  border-image: url(../assets/ie/status.png) 5 17 9 50 fill round;
}
.ie-status .sp {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0 4px 0 2px;
  border-style: solid;
  border-width: 2px 2px 2px 0;
  border-image: url(../assets/ie/statuspane.png) 2 2 2 0;
  white-space: nowrap;
}
.ie-status .main { flex: 1 1 auto; overflow: hidden; }
.ie-status .main span { overflow: hidden; text-overflow: ellipsis; }
.ie-status img { width: 16px; height: 16px; flex: none; }
.ie-status .prog { width: 118px; flex: none; padding: 0 3px; }
.ie-status .small { width: 22px; flex: none; }
.ie-status .zone { width: 150px; flex: none; padding-left: 4px; }
.ie-status .sgrip { width: 16px; flex: none; background: url(../assets/ie/grip.png) right bottom no-repeat; margin: -3px 0 -1px; }
.maximized .ie-status .sgrip { visibility: hidden; }
@media (max-width: 600px) {
  .ie-status .prog, .ie-status .small { display: none; }
  .ie-status .zone { width: 92px; }
}
/* [Progress.Bar] ProgressTrack.bmp (SizingMargins 4, 4, 3, 3) with [Progress.Chunk]s, 6px + 2px apart. */
.ie-status .bar {
  flex: 1;
  height: 14px;
  visibility: hidden;
  border-style: solid;
  border-width: 3px 4px;
  border-image: url(../assets/ie/progress.png) 3 4 fill repeat;
  overflow: hidden;
}
.ie-status .bar.on { visibility: visible; }
.ie-status .bar .fill { height: 100%; width: 0; margin-left: -2px; background: url(../assets/ie/progress-chunk.png) 0 0 / 8px 100% repeat-x; }

/* Menu band popups: submenu arrows; the Back/Forward and Links popups. */
.popup .mi.sub::after {
  content: "";
  margin-left: auto;
  border: 4px solid transparent;
  border-right: 0;
  border-left-color: currentColor;
  transform: translateX(6px);
}
.popup.iepop { position: fixed; z-index: 95; min-width: 0; }
.popup.iepop .mi { padding: 0 20px 0 17px; }