ESPTrainer/imports/ui/styles/Score.scss

@import "gradient";

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

  h3 {
    color: #fff;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  .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;
        font-size: 0.7em;
        top: -15px;
        @if($number > 10) { left: -5px; }
        @else { left: -2px; }
        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);
    }
  }
}