/* Mozilla 1.0, Classic theme (apps/mozilla). */

.moz {
  font: 11px var(--ui-font);
}

/* toolbars: raised strips with a grippy at the left, like Classic */
.moz-bar {
  display: flex;
  align-items: center;
  box-shadow: inset 0 1px var(--hilite), inset 0 -1px var(--shadow);
  padding-right: 4px;
}

.moz-grippy {
  flex: none;
  align-self: stretch;
  width: 9px;
  margin: 2px 3px 2px 1px;
  box-shadow: inset 1px 1px var(--hilite), inset -1px -1px var(--shadow);
  background: linear-gradient(90deg, transparent 3px, var(--shadow) 3px, var(--shadow) 4px, var(--hilite) 4px, var(--hilite) 5px, transparent 5px);
}

/* Back, Forward, Reload, Stop: icon over text, flat until hovered */
.moz-big {
  position: relative;
  flex: none;
  width: 48px;
  height: 42px;
  padding: 1px 0 0;
  background: var(--face);
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  font: 11px var(--ui-font);
  color: #000;
}

.moz-big canvas {
  width: 22px;
  height: 22px;
}

.moz-big:hover:not(:disabled) {
  box-shadow: inset -1px -1px var(--shadow), inset 1px 1px var(--hilite);
}

.moz-big:active:not(:disabled) {
  box-shadow: inset -1px -1px var(--hilite), inset 1px 1px var(--shadow);
  padding: 2px 0 0 1px;
}

.moz-big:disabled {
  color: var(--shadow);
  text-shadow: 1px 1px 0 var(--hilite);
}

.moz-big:disabled canvas {
  filter: grayscale(1) contrast(0.45) brightness(1.25);
}

.moz-big.moz-hasdrop {
  width: 44px;
}

/* the little drop-down arrow beside Back and Forward */
.moz-bigdrop {
  flex: none;
  width: 11px;
  height: 42px;
  position: relative;
  margin-right: 2px;
}

.moz-bigdrop::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 12px;
  border: 3px solid transparent;
  border-top: 4px solid #000;
}

.moz-bigdrop:hover {
  box-shadow: inset -1px -1px var(--shadow), inset 1px 1px var(--hilite);
}

/* the location bar */
.moz-loc {
  position: relative;
  flex: 1;
  height: 22px;
  margin: 0 3px 0 6px;
  background: var(--window);
  box-shadow: inset -1px -1px var(--hilite), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark);
  display: flex;
  align-items: center;
}

.moz-proxy {
  flex: none;
  margin: 0 1px 0 3px;
}

.moz-url {
  flex: 1;
  min-width: 0;
  height: 18px;
  border: none;
  outline: none;
  background: transparent;
  font: 12px var(--arial);
  padding: 0 2px;
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}

.moz-drop {
  flex: none;
  width: 16px;
  height: 18px;
  margin-right: 2px;
  background: var(--face);
  box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--light), inset -2px -2px var(--shadow), inset 2px 2px var(--hilite);
  position: relative;
}

.moz-drop::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 7px;
  border: 4px solid transparent;
  border-top: 4px solid #000;
  border-bottom: 0;
}

.moz-drop:active {
  box-shadow: inset 1px 1px var(--shadow);
}

.moz-small {
  flex: none;
  height: 24px;
  padding: 0 5px;
  margin: 0 1px;
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--face);
  border: none;
  font: 11px var(--ui-font);
  color: #000;
}

.moz-small:hover {
  box-shadow: inset -1px -1px var(--shadow), inset 1px 1px var(--hilite);
}

.moz-small:active {
  box-shadow: inset -1px -1px var(--hilite), inset 1px 1px var(--shadow);
}

/* the throbber: the lizard in a black box, top right */
.moz-throbber {
  flex: none;
  width: 34px;
  height: 34px;
  margin-left: 6px;
  background: #000;
  box-shadow: inset -1px -1px var(--hilite), inset 1px 1px var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}

.moz-throbber canvas {
  width: 24px;
  height: 24px;
}

/* the Personal Toolbar */
.moz-personal {
  gap: 1px;
}

.moz-pitem {
  flex: none;
  height: 18px;
  padding: 0 4px 0 2px;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--face);
  border: none;
  font: 11px var(--ui-font);
  color: #000;
  white-space: nowrap;
}

.moz-pitem:hover {
  box-shadow: inset -1px -1px var(--shadow), inset 1px 1px var(--hilite);
}

.moz-pitem:active {
  box-shadow: inset -1px -1px var(--hilite), inset 1px 1px var(--shadow);
}

.moz-psep {
  flex: none;
  width: 2px;
  height: 16px;
  margin: 0 3px;
  box-shadow: inset 1px 0 var(--shadow), inset -1px 0 var(--hilite);
}

/* the page */
.moz-content {
  background: #fff;
  box-shadow: inset -1px -1px var(--hilite), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark);
  padding: 2px;
}

.moz-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}

/* the status bar: component bar, status text, progress meter, padlock */
.moz-status {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 2px 0 1px;
}

.moz-components {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 2px;
  box-shadow: inset -1px -1px var(--shadow), inset 1px 1px var(--hilite);
}

.moz-online {
  margin-right: 2px;
}

.moz-comp {
  width: 20px;
  height: 18px;
  padding: 0;
  border: none;
  background: var(--face);
  display: flex;
  align-items: center;
  justify-content: center;
}

.moz-comp:hover {
  box-shadow: inset -1px -1px var(--shadow), inset 1px 1px var(--hilite);
}

.moz-comp:active {
  box-shadow: inset -1px -1px var(--hilite), inset 1px 1px var(--shadow);
}

.moz-stext {
  flex: 1;
  min-width: 0;
  line-height: 18px;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset -1px -1px var(--hilite), inset 1px 1px var(--shadow);
}

.moz-meter {
  flex: none;
  width: 104px;
  padding: 3px;
  box-shadow: inset -1px -1px var(--hilite), inset 1px 1px var(--shadow);
  position: relative;
  overflow: hidden;
}

.moz-meterfill {
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(90deg, #000080 0 7px, transparent 7px 9px);
}

/* size unknown: the blocks run back and forth */
.moz-meter.busy .moz-meterfill {
  width: 36px;
  animation: moz-sweep 1.2s linear infinite alternate;
}

@keyframes moz-sweep {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(62px);
  }
}

.moz-lockcell {
  flex: none;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset -1px -1px var(--hilite), inset 1px 1px var(--shadow);
}

/* View Page Source */
.moz-source {
  position: absolute;
  left: 0;
  top: 19px;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 4px;
  overflow: auto;
  background: #fff;
  font: 12px 'Courier New', Courier, monospace;
  white-space: pre;
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
  box-shadow: inset -1px -1px var(--hilite), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark);
}

.moz-source.wrap {
  white-space: pre-wrap;
  word-break: break-all;
}

.src-tag {
  color: #800080;
}

.src-attr {
  color: #000;
  font-weight: bold;
}

.src-value {
  color: #0000ff;
}

.src-comment {
  color: #008000;
  font-style: italic;
}

.src-doctype {
  color: #808080;
  font-style: italic;
}

.src-entity {
  color: #ff4500;
}

/* Preferences */
.moz-prefs .moz-tree {
  background: var(--window);
  box-shadow: inset -1px -1px var(--hilite), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark);
  padding: 3px 2px;
  font: 11px var(--ui-font);
  line-height: 16px;
}

.moz-prefs .moz-tree .sel {
  background: var(--select);
  color: #fff;
}

.moz-prefhead {
  background: var(--shadow);
  color: #fff;
  font: bold 12px var(--ui-font);
  line-height: 20px;
  padding-left: 6px;
}