@import "partials/fonts";
@import "partials/colors";

$F_COLOR: #C73033;
$D_COLOR: #E95D5F;
$C_COLOR: #F2AD29;
$B_COLOR: #87C387;
$A_COLOR: #44B046;

$BORDER_RADIUS: 25px;
$SECTIONS: F, D, C, B, A;
$SECTION_WIDTHS: 10%, 10%, 30%, 30%, 20%;
$SECTION_COLORS: $F_COLOR, $D_COLOR, $C_COLOR, $B_COLOR, $A_COLOR;
$SECTION_OFFSETS: 0%, 10%, 20%, 50%, 80%;
$SECTION_MARKERS: "", "10th", "20th", "50th", "80th";
$SECTION_CONFIG_VALUES: zip($SECTIONS, $SECTION_WIDTHS, $SECTION_COLORS, $SECTION_OFFSETS, $SECTION_MARKERS);

$PERCENTILE_COLOR: #B3B5B6;
$PERCENTILE_SIZE: 12px;
$LABEL_SIZE: 13px;

$FONT: join("Open Sans", $DEFAULT_FONT_FAMILY);

$LETTER_COLOR: white;
$LETTER_SIZE: 60px;

@function format-number($value) {
  $ending: $value % 10;
  @if ($ending == 1 and $value != 11) {
    @return "#{$value}st";
  }
  @if ($ending == 2 and $value != 12) {
    @return "#{$value}nd";
  }
  @if ($ending == 3 and $value != 13) {
    @return "#{$value}rd";
  }
  @return "#{$value}th";
}

@function choose-color($value) {
  @if ($value <= 10) {
    @return $F_COLOR;
  }
  @if ($value <= 20) {
    @return $D_COLOR;
  }
  @if ($value <= 50) {
    @return $C_COLOR;
  }
  @if ($value <= 80) {
    @return $B_COLOR;
  }
  @return $A_COLOR;
}

.thermometer {
  margin-top: 50px;
  margin-bottom: 90px;
  height: 100px;
  position: relative;
  font-family: $FONT;

  .section {
    margin-top: 30px;
    margin-bottom: 30px;
    position: absolute;
    line-height: 30px;
    border: 10px black;
    text-align: center;
    color: white;

    &:first-child {
      border-radius: $BORDER_RADIUS 0 0 $BORDER_RADIUS;
    }
  }
  .section-last {
    border-radius: 0 $BORDER_RADIUS $BORDER_RADIUS 0;
  }

  @each $section, $width, $color, $offset, $marker in $SECTION_CONFIG_VALUES {
    .section-#{$section} {
      background-color: $color;
      width: $width;
      left: $offset;

      &:not(.section-last):after {
        position: absolute;
        content: "";
        width: 1px;
        height: 5px;
        bottom: -5px;
        right: 0;
        background-color: $PERCENTILE_COLOR;
      }

      &:before {
        position: absolute;
        font-size: $PERCENTILE_SIZE;
        content: $marker;
        color: $PERCENTILE_COLOR;
        bottom: -28px;
        transform: translate(-50%, 0);
        left: 0;
      }
    }
  }

  .marker {
    height: 20px;
    text-align: center;
    position: absolute;
    background-color: white;
  }

  .marker-top {
    top: -5px;

    &:before {
      content: url("data:image/svg+xml,%3Csvg%20width%3D%277px%27%20height%3D%2740px%27%20viewBox%3D%270%200%2046%20273%27%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%3E%3Cg%20id%3D%27Page-1%27%20stroke%3D%27none%27%20stroke-width%3D%271%27%20fill%3D%27none%27%20fill-rule%3D%27evenodd%27%3E%3Cpath%20d%3D%27M23%2C43%20L23%2C235%27%20id%3D%27Line%27%20stroke%3D%27%23010101%27%20stroke-width%3D%276%27%20stroke-linecap%3D%27square%27%3E%3C%2Fpath%3E%3Ccircle%20id%3D%27Oval%27%20stroke%3D%27%23010101%27%20stroke-width%3D%276%27%20cx%3D%2723%27%20cy%3D%2723%27%20r%3D%2720%27%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
      position: absolute;
      top: 0;
      width: 7px;
      left: 50%;
      transform: translate(-50%, 0);
    }
  }

  @for $i from 0 through 100 {
    .marker-#{$i} {
      transform: translate(-50%, 0);
      @if $i == 0 { left: percentage(1/100); }
      @else if $i == 100 { left: percentage(99/100); }
      @else { left: percentage($i/100); }

      &:after {
        position: absolute;
        content: format-number($i);
        color: $PERCENTILE_COLOR;
        font-size: $PERCENTILE_SIZE;
        top: 15px;
        left: 0;
        width: 100%;
        text-align: center;
        background: white;
      }
      .arrow-box {
        background: choose-color($i);

        &:before {
          border-top-color: choose-color($i);
        }
      }
    }
  }

  .marker-bottom {
    bottom: -25px;
    font-size: $LABEL_SIZE;
    z-index: 1;

    &:before {
      content: url("data:image/svg+xml,%3Csvg%20width%3D%277px%27%20height%3D%2740px%27%20viewBox%3D%270%200%2046%20273%27%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%3E%3Cg%20id%3D%27Page-1%27%20stroke%3D%27none%27%20stroke-width%3D%271%27%20fill%3D%27none%27%20fill-rule%3D%27evenodd%27%3E%3Cpath%20d%3D%27M23%2C3%20L23%2C229.5%27%20id%3D%27Line%27%20stroke%3D%27%23010101%27%20stroke-width%3D%276%27%20stroke-linecap%3D%27square%27%3E%3C%2Fpath%3E%3Ccircle%20id%3D%27Oval%27%20stroke%3D%27%23010101%27%20stroke-width%3D%276%27%20cx%3D%2723%27%20cy%3D%27250%27%20r%3D%2720%27%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
      position: absolute;
      top: -45px;
      width: 7px;
      left: 50%;
      transform: translate(-50%, 0);
    }
    &:after {
      display: none;
    }
  }

  .marker-bottom-long {
    bottom: -67px;
    font-size: $LABEL_SIZE;

    &:before {
      content: url("data:image/svg+xml,%3Csvg%20width%3D%277px%27%20height%3D%27150px%27%20viewBox%3D%270%200%2046%20273%27%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%3E%3Cg%20id%3D%27Page-1%27%20stroke%3D%27none%27%20stroke-width%3D%271%27%20fill%3D%27none%27%20fill-rule%3D%27evenodd%27%3E%3Cpath%20d%3D%27M23%2C-300%20L23%2C229.5%27%20id%3D%27Line%27%20stroke%3D%27%23010101%27%20stroke-width%3D%276%27%20stroke-linecap%3D%27square%27%3E%3C%2Fpath%3E%3Ccircle%20id%3D%27Oval%27%20stroke%3D%27%23010101%27%20stroke-width%3D%276%27%20cx%3D%2723%27%20cy%3D%27250%27%20r%3D%2720%27%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
      position: absolute;
      top: -95px;
      width: 7px;
      left: 50%;
      transform: translate(-50%, 0);
    }
    &:after {
      display: none;
    }
  }
}

.arrow-box {
  position: relative;
  top: -30px;
  border-radius: 3px;
  padding: 5px 10px;
  color: white;

  &:before,
  &:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  &:before {
    border-width: 5px;
    margin-left: -5px;
  }
}

.letter {
  border-radius: 50%;
  width: auto;
  height: 100%;
  font-size: $LETTER_SIZE;
  color: $LETTER_COLOR;
  text-align: center;
  position: relative;
  font-family: $FONT;

  .letter-grade {
     position: absolute;
     top: 50%;
     transform: translate(0,-50%);
     left: 0;
     right: 0;
  }

  @each $section, $color in zip($SECTIONS, $SECTION_COLORS) {
    &.letter-grade-#{$section} {
      background-color: $color;
    }
  }

  &.letter-grade-unknown {
    background-color: $TERTIARY_FONT_COLOR;
  }
}