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

:root {
  --root-padding: var(--s0);
  --text-color: var(--neutral-color800);
  --panel-color: white;
  --min-panel-size: 300px;
  --controls-font-size: 0.8rem;
}

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
}

.lhs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 3;
      -ms-flex: 3;
          flex: 3;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  min-height: calc(300px + var(--root-padding));
  min-width: var(--min-panel-size);
  position: relative;
}

.rhs {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 2.5;
      -ms-flex: 2.5;
          flex: 2.5;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  min-width: var(--min-panel-size);
  margin-left: var(--s-2);
}

.demo__moneyflow {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
}

.demo__kl-container {
  position: relative;
  -webkit-box-flex: 10;
      -ms-flex-positive: 10;
          flex-grow: 10;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 100px;
  min-height: 100px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.demo__timeline {
  position: relative;
  -webkit-box-flex: 10;
      -ms-flex-positive: 10;
          flex-grow: 10;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 100px;
  min-height: 100px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.demo__moneyflow__controls {
  background-color: var(--neutral-color700);
  padding: var(--s-2) 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  font-size: var(--controls-font-size);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.demo__moneyflow__controls__checkbox {
  padding: 0;
  background-color: transparent;
}

.demo__moneyflow__controls__checkbox > label:hover {
  background-color: transparent;
}

.demo__moneyflow__controls__checkbox input[type='checkbox'] {
  display: none;
}

.button.button--small.button--plain.border.border--thin {
  margin-left: var(--section-item-side-padding);
  margin-right: var(--section-item-side-padding);
}

@media (max-width: 880px) {
  .demo__moneyflow__controls {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

/* the point at which the view changes to column rather than row layout */
@media (max-width: 880px) {
  .rhs {
    margin-top: var(--root-spacing);
    margin-left: 0;
  }
}

.tooltip {
  background-color: hsl(209, 15%, 28%);
  border-radius: 0.1975rem;
  color: hsl(216, 33%, 97%);
  display: none;
  max-height: 300px;
  max-width: 300px;
  overflow-y: auto;
  padding: 0.666rem;
  position: absolute;
  pointer-events: none;
}

.tooltip__label {
  color: hsl(211, 13%, 65%);
  font-size: 0.7em;
}

.tooltip__account {
  color: hsl(214, 15%, 91%);
  font-size: 0.7em;
}

.tooltip__amount {
  color: hsl(214, 15%, 91%);
  font-size: 0.7em;
}

.stack--small > * + * {
  margin-top: 0.666rem;
}