/*
 * Styles for the demo
 */
// Import Bootstrap 4 styles
@import "../../node_modules/bootstrap/scss/bootstrap";
// Import Prismjs styles
@import "../../node_modules/prismjs/themes/prism";
// Import Bootstrap-slider styles
@import "../../node_modules/bootstrap-slider/dist/css/bootstrap-slider";
// Core TAG styles
@import "../../dist/tag/css/tag";

// Styles for on-the-fly taxonomy YAML editor
// Including overrides to prevent conflicts with default Prism styling
#tag-taxonomy-editor {
  border: 1px solid lightgray;
}

#tag-taxonomy-editor pre {
  background: none;

  padding: 10px;
  font-size: 13px;
  line-height: 20px;
  white-space: pre;
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  margin: 0 !important;
  outline: none;
  text-align: left;
}

#tag-taxonomy-editor code {
  line-height: 20px;
}

#tag-taxonomy-editor .codeflask {
  min-height: 400px;
  position: relative;
}

// Styles for the taxonomy colour picker accordion

// Missing borders above some accordion headers
#tag-taxonomy-tree div.collapse + a.card-header {
  border-top: 1px solid rgba(0, 0, 0, .125);
}

// Icons for accordion headers
[data-toggle="collapse"] i.fas:before {
  content: "\f0d7";
}

[data-toggle="collapse"].collapsed i.fas:before {
  content: "\f0da";
}

// Styles for the taxonomy colour picker plugin
@import "../../node_modules/bootstrap-colorpicker/dist/css/bootstrap-colorpicker";

.tag-cp input[type=text] {
  width: 100px;
}

// Styles for the bootstrap-slider plugin
.slider.slider-horizontal {
  width: 300px;
}

.slider-selection {
  background: #337ab7;
  opacity: 0.75;
}

// Fonts used in the visualisation
// The actual loading of the font happens at the start of `demo.js` via the Web Font Loader, but we include the Google
// fonts import here as well so that they work properly for downloaded SVGs.
@import url("https://fonts.googleapis.com/css?family=Nunito:400,600,700");

svg, svg text {
  font-family: Nunito, futura, helvetica, arial, sans-serif;
  font-weight: 600;
}

svg text {
  cursor: default;
  user-select: none;
}