@import "_colors.less";

:host {
  --base-font: var(--bokeh-base-font, Helvetica, Arial, sans-serif);
  --mono-font: var(--bokeh-mono-font, monospace);
  --font-size: var(--bokeh-font-size, 12px);

  --line-height: calc(20 / 14);
  --line-height-computed: calc(var(--font-size) * var(--line-height));

  --border-radius: 4px;

  --padding-vertical: 6px;
  --padding-horizontal: 12px;

  --bokeh-top-level: 10000; // used for z-index of menus, dropdowns, etc.

  // Colors
  --color: #colors[text];
  --background-color: #colors[background];
  --hover-color: #colors[hover];
  --disabled-color: #colors[disabled];
  --border-color: #colors[border];
  --divider-color: #colors[divider];
  --shortcut-color: #colors[disabled];
  // TODO: should highlight-color be #colors[accent] (mauve-500)?
  --highlight-color: #colors[highlight];
  --active-bg: #colors[active-background];
  --active-fg: #colors[primary];
  --inactive-bg: #colors[surface];
  --inactive-fg: #colors[placeholder];
  --icon-color: var(--bokeh-icon-color, #colors[icon]);
  --icon-color-disabled: var(--bokeh-icon-color-disabled, #colors[icon-disabled]);
  --error: #colors[error];
  --inverted-color: #colors[background]; // the color for when the background is dark
  --placeholder-color: #colors[placeholder];
  --surface-background-color: #colors[surface];
  --disabled-background-color: #colors[surface];
  --input-focus-border-color: #colors[highlight]; // same as rgb(101, 162, 203)
  --input-focus-halo-color: rgba(101, 162, 203, 0.6); // same as fade(#colors[highlight], 60%)

  // Border, box shadow, outline
  --border-style: solid;
  --border-width: 1px;
  --border: var(--border-color) var(--border-style) var(--border-width);
  --box-shadow-color: rgba(0, 0, 0, 0.175);
  --box-shadow-inset: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --box-shadow-x-symmetric: 0 6px 12px var(--box-shadow-color); // symmetric about the x-axis
  --box-shadow: 2px 4px 8px var(--box-shadow-color);
  --divider-width: 1px;
  --divider: 1px var(--divider-color) solid;
  --outline-color: #colors[border];
  --outline-style: dotted;
  --outline-width: 1px;
  --outline: var(--outline-color) var(--outline-style) var(--outline-width);
}

:host {
  box-sizing: border-box;
  font-family: var(--base-font);
  font-size: var(--font-size);
  line-height: var(--line-height);
}

*, *:before, *:after {
  // box-sizing is not inherited by default, so force it to get consistent results
  box-sizing: inherit;
  font-family: inherit;
}

pre, code, tt {
  font-family: var(--mono-font);
  margin: 0;
}
