@import '../base/color';
@import '../base/breakpoint';

.axis {
  color: $axis-graph;
  .tick-text {
    fill: $axis-graph;
    &.tick-text-selected {
      fill: $text-bright;
    }
  }
}
.background-true {
  display: inline;
}
.background-false {
  display: none;
}
.bar-ELECTRICITY {
  fill: $elec-off-color;
  &.selected {
    fill: $elec-color;
    filter: drop-shadow(0 -0.1rem 0.2rem $elec-color);
  }
}

.bar-compare-ELECTRICITY {
  fill: $elec-compare-off-color;
  &.selected {
    fill: $elec-compare-color;
    filter: drop-shadow(0 -0.1rem 0.2rem $elec-compare-color);
  }
}

.bar-WATER {
  fill: $water-off-color;
  &.selected {
    fill: $water-color;
    filter: drop-shadow(0 -0.1rem 0.2rem $water-color);
  }
}

.bar-compare-WATER {
  fill: $water-compare-off-color;
  &.selected {
    fill: $water-compare-color;
    filter: drop-shadow(0 -0.1rem 0.2rem $water-compare-color);
  }
}

.bar-GAS {
  fill: $gas-off-color;
  &.selected {
    fill: $gas-color;
    filter: drop-shadow(0 -0.1rem 0.2rem $gas-color);
  }
}

.bar-compare-GAS {
  fill: $gas-compare-off-color;
  &.selected {
    fill: $gas-compare-color;
    filter: drop-shadow(0 -0.1rem 0.2rem $gas-compare-color);
  }
}

.bar-MULTIFLUID {
  fill: $multi-off-color;
  &.selected {
    fill: $multi-color;
    filter: drop-shadow(0 -0.1rem 0.2rem $multi-color);
  }
}

.bar-compare-MULTIFLUID {
  fill: $multi-compare-off-color;
  &.selected {
    fill: $multi-compare-color;
    filter: drop-shadow(0 -0.1rem 0.2rem $multi-color);
  }
}

/** Animation **/
.bounce-1 {
  animation-name: bounce-1;
  animation-timing-function: cubic-bezier(1, 1, 0.42, 1);
  animation-iteration-count: 1;
  transform-origin: bottom center;
  transform-box: fill-box;
}
@keyframes bounce-1 {
  0% {
    transform: scale(0.1, 0.1);
  }
  28% {
    transform: scale(0.1, 1.1);
  }
  45% {
    transform: scale(0.8, 0.95);
  }
  55% {
    transform: scale(1, 1);
  }
  65% {
    transform: scale(1, 0.98);
  }
  75% {
    transform: scale(1, 1);
  }
}

.bounce-2 {
  animation-name: bounce-2;
  animation-timing-function: cubic-bezier(1, 1, 0.42, 1);
  animation-iteration-count: 1;
  transform-origin: bottom center;
  transform-box: fill-box;
}
@keyframes bounce-2 {
  0% {
    transform: scale(1, 1);
  }
  28% {
    transform: scale(1, 1.1);
  }
  45% {
    transform: scale(0.8, 0.95);
  }
  55% {
    transform: scale(1, 1);
  }
  65% {
    transform: scale(1, 0.98);
  }
  75% {
    transform: scale(1, 1);
  }
}

/** Animatio ndelay **/
.delay {
  animation-duration: 0.4s;
}
.delay--0 {
  animation-duration: 0.6s;
}
.delay--1 {
  animation-duration: 0.7s;
}
.delay--2 {
  animation-duration: 0.8s;
}
.delay--3 {
  animation-duration: 0.9s;
}
.delay--4 {
  animation-duration: 1s;
}
.delay--5 {
  animation-duration: 1.1s;
}
.delay--6 {
  animation-duration: 1.2s;
}
.delay--7 {
  animation-duration: 1.3s;
}
.delay--8 {
  animation-duration: 1.4s;
}
.delay--9 {
  animation-duration: 1.5s;
}
.delay--10 {
  animation-duration: 1.6s;
}
.delay--11 {
  animation-duration: 1.8s;
}
.delay--12 {
  animation-duration: 1.9s;
}