@use "sass:math";

.alert-history-tooltip {
  width: 100%;
  height: 4px;
  line-height: 4px;
}

svg.alert-history {
  height: 4px;
  line-height: 4px;
  width: 100%;
  vertical-align: bottom;
  overflow: auto;

  &:not(:first-child) {
    margin-left: 1px;
  }

  &:not(:last-child) {
    margin-right: 1px;
  }

  @for $i from 1 through 24 {
    &:nth-of-type(#{$i}) > rect.fetching {
      animation-name: alert-history-loading-#{$i};
    }
  }

  rect {
    width: 100%;
    height: 100%;
    transition-property: fill;
    transition-duration: 0.3s;

    &.firing {
      &.firing-0 {
        fill: #fadbd8;
      }

      &.firing-1 {
        fill: #f3a69e;
      }

      &.firing-2 {
        fill: #ee8277;
      }

      &.firing-3 {
        fill: #e95e50;
      }

      &.firing-4 {
        fill: #d04436;
      }

      &.firing-5 {
        fill: #a2352a;
      }
    }

    &.inactive {
      fill: var(--karma-alert-history-inactive);
    }

    &.fetching {
      fill: var(--karma-alert-history-inactive);
      animation-timing-function: ease-out;
      animation-duration: 12s;
      animation-iteration-count: infinite;
    }

    &.error {
      fill: $warning;
    }
  }
}

@for $i from 1 through 24 {
  @keyframes alert-history-loading-#{$i} {
    $step: math.div(100, 25);
    $start: ($step * $i) - $step;
    $middle: ($step * $i);
    $stop: ($step * $i) + $step;

    0% {
      opacity: 1;
    }
    #{$start * 1%} {
      opacity: 1;
    }
    #{$middle * 1%} {
      opacity: 0;
    }
    #{$stop * 1%} {
      opacity: 1;
    }

    100% {
      opacity: 1;
    }
  }
}
