/* The default stylesheet. Always embedded into binaries and applied before any other CSS. */

:root {
  color: #222;
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 1.2em;
}

Spacer {
  flex: 1;
  justify-self: stretch;
}

ButtonLike,
CheckBox,
RadioButton,
ComboBoxBase {
  display: flex;
  cursor: pointer;
}

Link {
  place-self: start;
  cursor: pointer;
}

Paragraph {
  white-space: pre-wrap;
}

TextField,
TextArea {
  --caret: #000;
  --caret-replace: rgba(128, 128, 255, 0.5);
  --selection-focused: rgba(96, 160, 255, 0.3);
  --selection-normal: rgba(96, 160, 255, 0.2);
}
TextArea {
  --matching-bracket-highlight: rgba(255, 224, 176, 0.6);
  --search-highlight-current: rgba(128, 128, 255, 0.5);
  --search-highlight-other: rgba(128, 128, 255, 0.25);
}
SourceEdit {
  --left-pane-bg-1: #f4f4f4;
  --left-pane-bg-2: #fff;
  --left-pane-bg-3: #f0f0f0;
  --left-pane-number-text: #555;
  --left-pane-number-text-edited: #c0c000;
  --left-pane-number-text-saved: #00c000;
  --left-pane-number-text-current-line: #555;
  --left-pane-number-bg: #f4f4f4;
  --left-pane-number-bg-current-line: transparent;
  --left-pane-icon-breakpoint: #f00;
  --left-pane-icon-bookmark: #00f;
  --left-pane-icon-error: rgba(255, 0, 0, 0.5);
}

EditorSearchPane {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "fe fb c" "re rb .";
}
EditorSearchPane > .find {
  grid-area: fe;
}
EditorSearchPane > .find-buttons {
  display: flex;
  grid-area: fb;
}
EditorSearchPane > .replace {
  grid-area: re;
}
EditorSearchPane > .replace-buttons {
  display: flex;
  grid-area: rb;
}
EditorSearchPane > .close {
  grid-area: c;
}

GroupBox {
  display: flex;
  flex-direction: column;
}

TabItem,
TabBar {
  display: flex;
}

Tabs {
  display: column;
}

ListView > .item,
TreeItemWidget,
TreeItemWidget > Panel {
  display: flex;
}

TreeWidget {
  display: flex;
  flex-direction: column;
  gap: 0;
}

ToolBar,
ToolBarHost,
StatusLine,
StatusLineTextPanel,
StatusLineIconPanel {
  display: flex;
}

WindowFrame {
  display: column;
}

WindowFrame > .caption,
WindowFrame > .body {
  display: flex;
}

Dialog {
  display: flex;
  flex-direction: column;
}

Dialog > .buttons {
  display: flex;
}

FileDialog .content {
  display: flex;
  justify-self: stretch;
}

FileDialog .right-panel {
  display: flex;
  flex-direction: column;
}

FilePathPanelItem,
FileNameField {
  display: flex;
}

SettingsDialog > .content {
  display: flex;
  justify-self: stretch;
}
SettingsPage {
  display: column;
}
SettingsList {
  display: grid;
  grid-template-columns: 1fr 1fr;
}



CssHotReloadWidget {
  display: flex;
  flex-direction: column;
  width: 200px;
  padding: 18px;
}
CssHotReloadWidget > * {
  text-align: center;
}
CssHotReloadWidget > Label[state="watching"] {
  color: green;
}
CssHotReloadWidget > Label[state="error"] {
  color: red;
}
