@import '../../styles/variables.css';

:root {
  --section-item-side-padding: var(--s0);
  --section-item-vertical-padding: var(--s-2);
}

.demo {
  height: calc(100vh - var(--topnav-height));
  width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

.demo__timeline {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.demo__rhs-panel {
  background-color: var(--neutral-color800);
  color: var(--neutral-color050);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: var(--font-size-info);
  max-width: 320px;
  padding: 20px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: top;
  overflow: auto;
}

.demo__rhs-panel > .demo__options-panel + .demo__options-panel {
  margin-top: var(--s-3);
}

.demo__options-panel {
  border: none;
  border-radius: var(--border-radius);
  background-color: var(--neutral-color850);
}

.demo__options-panel > * {
  padding: var(--s-2) var(--section-item-side-padding);
}

.demo__options-panel label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: var(--s-3);
  cursor: pointer;
}

.demo__options-panel label > * + * {
  margin-left: var(--s-3);
}

.demo__options-panel label:hover {
  background-color: var(--neutral-color900);
}

.demo__options-panel label:last-child {
  margin-bottom: 0;
}

.demo__options-panel label input[type='checkbox'] {
  display: none;
}

.demo__options-panel select {
  display: block;
  font-size: 1em;
  color: var(--font-color);
  padding: var(--s-3) var(--s-2);
  padding-right: 2em; /* need extra padding to make enough room for the caret */
  width: 75%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: var(--border-thin) solid var(--neutral-color300);
  border-radius: var(--border-radius);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--neutral-color700);
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23E5E8EB%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat, repeat;
  background-position:
    right var(--s-1) top 50%,
    0 0;
  background-size:
    var(--s-1) auto,
    100%;
}

.check {
  font-size: 20px;
}

input ~ .check::before {
  content: '\f111';
}

input:checked ~ .check::before {
  content: '\f058';
}

.demo__title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  line-height: 1.24;
  margin-top: 0px;
  margin-right: 6px;
}
.demo__subtitle {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-h6);
}

.demo__legend {
  display: inline-block;
  margin-left: 8px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.demo__legend-line {
  width: 0;
  height: 22px;
  display: inline-block;
  margin-left: 12px;
  margin-right: 19px;
}

.demo__legend-line-label {
  margin-top: 14px;
}

input[type='range'] {
  width: 300px;
}

.demo__button-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: var(--section-item-vertical-padding) var(--section-item-side-padding);
}

#tooltip {
  background-color: var(--neutral-color050);
  border: none;
  border-top-left-radius: 4px;
  border-left: none;
  border-right: none;
  display: none;
  position: absolute;
  color: var(--background-color);
  pointer-events: none;

  -webkit-box-shadow: 4px 4px 5px -1px rgba(50, 50, 50, 0.6);
  box-shadow: 4px 4px 5px -1px rgba(50, 50, 50, 0.6);
}

#tooltip .wrapper {
  position: relative;
  background-color: white;
  padding: 6px 10px;
  border-left: solid 4px #cad1d8;
  border-right: solid 4px #cad1d8;
  border-top-left-radius: 4px;
  z-index: 1;
}

.checkbox-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.checkbox-container > * + * {
  margin-left: var(--s-2);
}

@font-face {
  font-family: 'Solid Font Awesome Icons';
  font-weight: 900;
  src: url('/public/fonts/fontawesome-free/webfonts/fa-solid-900.eot');
  src:
    url('/public/fonts/fontawesome-free/webfonts/fa-solid-900.eot?#iefix')
      format('embedded-opentype'),
    url('/public/fonts/fontawesome-free/webfonts/fa-solid-900.woff2') format('woff2'),
    url('/public/fonts/fontawesome-free/webfonts/fa-solid-900.woff') format('woff'),
    url('/public/fonts/fontawesome-free/webfonts/fa-solid-900.ttf') format('truetype'),
    url('/public/fonts/fontawesome-free/webfonts/fa-solid-900.svg#fontawesome') format('svg');
}