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

:root {
  --button-border-color: #40556c;
  --button-background-color: var(--neutral-color900);
  --button-hover-color: var(--neutral-color700);
  --main-size: 16px;
  --half-size: calc(var(--main-size) / 2);
}

.demo__investigation {
  height: calc(100vh - var(--topnav-height));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background-color: white;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

#activity-timeline {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  height: 100px;
}

#placeholder {
  color: black;
  text-align: center;
  line-height: 160px;
}

.demo__rhs-panel {
  z-index: 2;
  padding: 0px;
  font-size: var(--main-size);
  line-height: var(--main-size);
  max-width: 288px;
  background-color: var(--neutral-color850);
}

.demo .demo__rhs-panel .demo__options-panel {
  padding: var(--main-size);
  border-bottom: 1px solid hsla(0, 0%, 100%, 5%);
  margin: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.demo__options-panel > p {
  margin: 0px;
  padding: var(--half-size) 0px 0px;
  line-height: calc(var(--main-size) * 1.5);
}

.demo__legend {
  margin-left: 0px;
}

.demo__legend p {
  margin: 0px;
  padding: var(--half-size) 0px;
}
.demo__legend p:first-child {
  padding: 0px 0px var(--half-size);
}
.demo__legend p:last-child {
  padding: var(--half-size) 0px 0px;
}

.demo__options-panel select {
  margin: 8px;
}

#clear {
  margin-top: var(--s-1);
  width: 100%;
  padding: var(--s-1);
  background-color: #0f9b88;
  color: white;
}

#key {
  padding: 0;
}

#annotation-container {
  height: 160px;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#handle-container {
  clip-path: polygon(0vw 0vh, 0vw 100vh, 100vw 100vh, 100vw 0vh);
}

#handle-drawing-space {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  height: 5%;
}

.annotation-box {
  width: 210px;
  height: 132px;
  z-index: 1;
  -o-object-fit: contain;
     object-fit: contain;
  margin-top: 12px;
  border-radius: 8px;
  background-color: #f0f0f0;
  border: 1px solid lightgray;
  position: absolute;
  top: 0;
}

.annotation-header {
  padding: 0px 12px 0px 12px;
  border-radius: 8px 8px 0 0;
}

.annotation-icon {
  font-size: 9px;
  margin: 0px;
  width: 20px;
  height: 20px;
}

.annotation-time-str,
.annotation-time-range-str {
  font-size: 12px;
  position: absolute;
  left: 40px;
  color: white;
}
.annotation-time-str {
  margin-top: 6px;
}
.annotation-time-range-str {
  line-height: 12px;
  margin-top: 3px;
}

.annotation-text p {
  margin: 6px;
  font-size: 12px;
  color: var(--neutral-color900);
}

.annotation-box button {
  margin: 5px;
  position: absolute;
  right: 0px;
  background: transparent;
  color: white;
  border: none;
}

.annotation-handle,
.event-link {
  display: block;
  outline: 1px solid black;
  position: absolute;
  -webkit-transform-origin: left;
          transform-origin: left;
}

.event-link {
  outline-style: dashed;
}

#close-annotations {
  background-color: #109b88;
  width: 100%;
  text-transform: none;
  font-size: 0.8rem;
}

#close-annotations:hover {
  background-color: #44d6c2;
}

#close-annotations:disabled {
  background-color: #252c33;
}

.option-panel-title {
  padding: 0px;
  font-weight: 700;
  display: block;
  padding-bottom: var(--half-size);
}

.multitoggle-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 3px;
  padding: 0px;
  margin: 0px 0px var(--half-size);
  overflow: clip;
  border: 1px solid var(--button-border-color);
}
.multitoggle {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border-radius: 0px;
  padding: 10px;
  background-color: var(--button-background-color);
  color: #ffffff;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-width: 0px 1px 0px 0px;
  border-style: solid;
  border-color: var(--button-border-color);
  font-size: var(--font-size-info);
  font-weight: 100;
  text-transform: none;
}

.multitoggle-label {
  padding: var(--half-size) 0px;
}

.multitoggle:hover {
  background-color: var(--button-hover-color);
}

.multitoggle:last-child {
  border-width: 0px 0px 0px 0px;
}

.multitoggle.selected {
  background-color: var(--button-border-color);
}