/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@namespace html url("http://www.w3.org/1999/xhtml");

:root:-moz-lwtheme {
  background-color: var(--lwt-accent-color);
  color: var(--lwt-text-color);
}

#imageDlg {
  overflow: auto;
  max-width: inherit;
}

.MinWidth5em {
  min-width: 5em;
}

.MinWidth10em {
  min-width: 10em;
}

.MinWidth15em {
  min-width: 15em;
}

.MinWidth20em {
  min-width: 20em;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.larger {
  font-size: 120%;
}

*|*.narrow {
  width: 4em;
}

.menulist-narrow {
  width: 10em;
}

.wrap {
 width: 1em;
}

.menuitem-highlight-1 {
  font-weight : bold;
}

.color-well {
  width: 30px;
  height: 12px;
  border: 1px inset #CCCCCC;
  margin: auto;
}

.color-well[default="true"] {
  border: 1px solid transparent;
  background-color: inherit;
}

.color-well + .button-box {
  display: none;
}

.color-button {
  min-width: 0;
  margin: 2px;
}

button.color-button .button-text {
  margin-inline: 0;
}

#spacingLabel,
#alignLabel,
#imagemapLabel {
  margin-top: 0;
}

#ColorPickerSwatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-inline: -21px 10px;
  border: 1px solid var(--field-border-color);
}

#ColorInput {
  padding-inline-end: 21px;
}

#LastPickedButton {
  align-items: center;
}

#LastPickedColor {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-inline-start: 2px;
  border: 1px solid var(--field-border-color);
  order: 2;
}

/* temporary -- we need a simple box-based list defined in XBL */
tree.list {
  border: 1px inset #ccc;
  /* same as in menulist.css */
  margin: 1px 5px 2px;
  /* use rows="#" in XUL to define height */
}

#ColorPreview {
  border: 1px inset #ccc;
  margin-inline-start: 10px;
  padding: 0 5px;
  min-width: 100px;
  min-height: 50px;
}

#alignTypeSelect {
  margin-inline-start: 5px;
}

/* ::::: table properties dialog ::::: */

#NextButton,
#PreviousButton {
  list-style-image: url("chrome://global/skin/icons/arrow-left-12.svg");
  -moz-context-properties: stroke;
  stroke: currentColor;
}

#PreviousButton[type="row"] {
  list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
}

#NextButton[type="row"] {
  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
}

#NextButton > .button-box > .button-icon,
#PreviousButton > .button-box > .button-icon {
  margin-inline-end: 2px;
}

#NextButton:not([type="row"]) > .button-box > .button-icon {
  transform: scaleX(-1);
}

/* ::::: spelling dialog ::::: */

#MisspelledWord {
  font-weight: bold;
  max-width: 16em;
  text-overflow: ellipsis;
}

#ReplaceWordInput {
  min-width: 16em;
  width: 16em;
}

.spell-check {
  min-width: 8em;
}

/* ::::: color picker ::::: */

/* use outset shape for a button look */
.colorpicker {
  border: 1px outset #CCCCCC;
  /* This should be the same as for textbox */
  margin-inline-start: 4px;
  /* For a little extra space between buttons */
  margin-bottom: 2px;
}

.colorpicker:active {
  border: 1px inset #CCCCCC;
}

.smallspacer {
  width: 3px;
  height: 3px;
  min-width: 3px;
  min-height: 3px;
}

.spacer {
  width: 5px;
  height: 5px;
  min-width: 5px;
  min-height: 5px;
}

.bigspacer {
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
}

/* These should be the width of the checkbox and radio button images + margin + padding
   Used to indent below those to the level of the text label next to image
*/
.checkbox-spacer {
  width: 2em;
  min-width: 2em;
}

.radio-spacer {
  width: 2em;
  min-width: 2em;
}

.align-menu[value="top"] {
  list-style-image:url("chrome://editor/skin/icons/img-align-top.gif");
}

.align-menu[value="middle"] {
  list-style-image:url("chrome://editor/skin/icons/img-align-middle.gif");
}

.align-menu[value="bottom"] {
  list-style-image:url("chrome://editor/skin/icons/img-align-bottom.gif");
}

.align-menu[value="right"] {
  list-style-image:url("chrome://editor/skin/icons/img-align-right.gif");
}

.align-menu[value="left"] {
  list-style-image:url("chrome://editor/skin/icons/img-align-left.gif");
}

/* Don't change width/height of these without changing values in
  GetOriginalWidth(), EdImageProps.js
*/
#preview-image-box {
  border: 1px inset #CCCCCC;
  width: 82px;
  max-width: 82px;
  min-width: 82px;
  height: 52px;
  max-height: 52px;
  min-height: 52px;
  margin: 6px 5px;
  overflow: clip;
}

#preview-image-holder {
  padding: 0;
  margin: 0;
}

#tagLabel {
  font-weight: bold;
}

.AttributesTree {
  min-width: 200px;
  min-height: 200px;
}

#AddJSEAttributeNameList > menupopup > menuseparator,
#AddHTMLAttributeNameInput > menupopup > menuseparator {
  appearance: none;
  margin-block: 3px;
  padding-block: 0;
  border-top-color: #d7d7d7;
}

html|fieldset {
  margin: 1em 3px 3px 3px;
  padding: 3px 0 6px;
  border: none;
}
html|legend {
  font-weight: bold;
  margin-top: -1em;
  margin-inline-start: 3px;
  padding-inline: 3px;
}

html|fieldset > hbox,
html|fieldset > vbox,
html|fieldset > radiogroup,
html|fieldset > menulist {
  width: -moz-available;
}

html|table html|th {
  font-weight: normal;
  text-align: start;
}

*|*.display-flex {
  display: flex;
}

*|*.flex-1 {
  flex: 1;
}

#SuggestedList {
  flex-direction: column;
  max-height: 10em;
}

#dictionary-list {
  list-style-type: none;
  padding: 6px 3px;
  margin: 0;
  max-height: 5em;
  overflow-y: auto;
}

html|input[type="checkbox"] {
  -moz-appearance: checkbox;
}

/* Advanced Edit dialog */

#HTMLAttrCol,
#CSSPropCol,
#AttrCol {
  flex: 35 35;
}

#HTMLValCol,
#CSSValCol,
#HeaderCol {
  flex: 65 65;
}
