@import "gradient";

.score {
  display: flex;
  flex-direction: column;
  margin-bottom: 50px;

  .current-score {
    background: #fff;
    height: 3px;
    margin-top: 3px;
  }

  .scale {
    display: flex;
    flex: 1;
    height: 3px;
    justify-content: space-between;
    margin-top: 1em;
    position: relative;
    @include rainbow-gradient();

    .grade {
      position: relative;

      &:after {
        background: white;
        content: ' ';
        display: block;
        height: 5px;
        position: absolute;
        top: -1px;
        width: 1px;
      }

      @mixin grade-label($number) {
        content: quote(inspect($number));
        position: absolute;
        top: -20px;
        @if($number > 10) { left: -8px; }
        @else { left: -4px; }
        color: white;
      }

      @mixin grade-labels($numbers...) {
        @each $number in $numbers {
          &:nth-child(#{$number + 1}):before { @include grade-label($number); }
        }
      }

      @include grade-labels(0, 6, 12, 18, 24);
    }
  }
}