@import "../../styles/colors";

:host {
  display: block;
  margin: 10px 0;
}

.chart-progress-bar {
  border-radius: 9999px;
  overflow: hidden;
  position: relative;

  &.small {
    height: 8px;

    .progress {
      border-radius: 9999px;
    }
  }

  &.large {
    height: 16px;

    .bar {
      background: $lavender-light-1;
      box-shadow:
      inset -2px -2px 4px $white,
      inset 2px 2px 8px $eggplant-light-1;
    }
  }
}

.bar {
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
}

.progress {
  $start:  #FEA900;
  $end: #E71D36;

  position: absolute;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, $start, $end);

  &.low {
    background: linear-gradient(90deg, $start, #F9891A);
  }

  &.mid {
    background: linear-gradient(90deg, $start, #F36628);
  }

  &.high {
    background: linear-gradient(90deg, $start, #EE472F);
  }
}

.threshold {
  width: 1px;
  height: 100%;
  border-right: 1px dashed;
  position: absolute;
  z-index: 1;

  &.point-0 {
    border-color: $white;
  }

  &.point-1 {
    border-color: $crimson;
  }
}
