/* ------------------------------------------------------------------
   motif.css - the Motif widget kit: bevels, dither, buttons, fields,
   scroll bars and menus. Every window is built from these parts.
   ------------------------------------------------------------------ */

/* --- Bevels -------------------------------------------------------
   Motif draws a raised widget with a light top/left edge and a dark
   bottom/right edge. An inset widget is the same thing reversed. */

.bevel-out {
  border: var(--bevel) solid;
  border-color: var(--face-lt) var(--face-dk) var(--face-dk) var(--face-lt);
}

.bevel-in {
  border: var(--bevel) solid;
  border-color: var(--face-dk) var(--face-lt) var(--face-lt) var(--face-dk);
}

/* A chisel is an inset groove with a raised edge inside it. IRIX uses
   it around text fields and list boxes. */
.chisel {
  border: 1px solid;
  border-color: var(--face-dk) var(--face-lt) var(--face-lt) var(--face-dk);
  box-shadow: inset 1px 1px 0 var(--face-md), inset -1px -1px 0 var(--face-lt);
}

/* The 2x2 dither checkerboards are drawn by js/core/dither.js and
   arrive as --dither-* custom properties. Only the window frame and
   the title bar use them; see window.css. */

/* --- Buttons ------------------------------------------------------ */

.mbtn {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink);
  background: var(--face);
  border: var(--bevel) solid;
  border-color: var(--face-lt) var(--face-dk) var(--face-dk) var(--face-lt);
  padding: 3px 12px;
  min-height: 22px;
}

.mbtn:active,
.mbtn.on {
  border-color: var(--face-dk) var(--face-lt) var(--face-lt) var(--face-dk);
  background: var(--face-md);
}

.mbtn:focus {
  outline: 1px dotted var(--ink);
  outline-offset: -4px;
}

.mbtn:disabled {
  color: var(--face-md);
}

/* The default button in a dialog gets an extra ring around it. */
.mbtn.default {
  box-shadow: 0 0 0 2px var(--face), 0 0 0 3px var(--face-dk);
  margin: 3px;
}

/* --- Text fields -------------------------------------------------- */

.mfield {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink);
  background: var(--face);
  border: var(--bevel) solid;
  border-color: var(--face-dk) var(--face-lt) var(--face-lt) var(--face-dk);
  padding: 3px 5px;
  outline: none;
  user-select: text;
}

.mfield:focus {
  background: #c4c4c4;
}

textarea.mfield {
  resize: none;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.35;
}

/* --- Labels and separators ---------------------------------------- */

.mlabel {
  font-size: 12px;
  color: var(--ink);
}

.msep {
  height: 2px;
  border-top: 1px solid var(--face-dk);
  border-bottom: 1px solid var(--face-lt);
  margin: 6px 0;
}

/* --- List boxes --------------------------------------------------- */

.mlist {
  background: var(--face);
  border: var(--bevel) solid;
  border-color: var(--face-dk) var(--face-lt) var(--face-lt) var(--face-dk);
  overflow: auto;
}

.mlist-item {
  padding: 2px 6px;
  font-size: 12px;
  white-space: nowrap;
}

.mlist-item.sel {
  background: var(--select);
  color: #fff;
}

/* --- Scroll bars --------------------------------------------------
   Motif scroll bars are a sunken trough with a raised square thumb. */

.mscroll::-webkit-scrollbar {
  width: 17px;
  height: 17px;
}

.mscroll::-webkit-scrollbar-track {
  background: var(--face-md);
  border: 1px solid var(--face-dk);
}

.mscroll::-webkit-scrollbar-thumb {
  background: var(--face);
  border: 2px solid;
  border-color: var(--face-lt) var(--face-dk) var(--face-dk) var(--face-lt);
}

.mscroll::-webkit-scrollbar-corner {
  background: var(--face);
}

.mscroll {
  scrollbar-color: var(--face) var(--face-md);
  scrollbar-width: auto;
}

/* --- Menus (used by the toolchest) -------------------------------- */

.mmenu {
  position: absolute;
  z-index: 8000;
  background: var(--face);
  border: var(--bevel) solid;
  border-color: var(--face-lt) var(--face-dk) var(--face-dk) var(--face-lt);
  padding: 2px;
  min-width: 150px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

.mmenu-item {
  padding: 3px 18px 3px 10px;
  font-size: 12px;
  font-weight: bold;
  font-style: italic;
  white-space: nowrap;
  color: var(--ink);
}

.mmenu-item:hover {
  background: var(--select);
  color: #fff;
}

.mmenu-item.disabled {
  color: var(--face-md);
}

.mmenu-item.disabled:hover {
  background: transparent;
  color: var(--face-md);
}

.mmenu-sep {
  height: 2px;
  border-top: 1px solid var(--face-dk);
  border-bottom: 1px solid var(--face-lt);
  margin: 3px 2px;
}