@mixin standard-gradient($class, $color) {
  linearGradient.#{$class} {
    > .start {
      stop-color: $color;
      stop-opacity: 0.6;
    }

    > .end {
      stop-color: $color;
      stop-opacity: 0.05;
    }
  }
}

.chart.line-chart {
  display: block;
  height: 100%;
  position: relative;

  &.with-annotations {
    margin-top: 2em;
  }

  & > svg {
    display: block;
    height: 100%;
    width: 100%;
    overflow: visible;
  }

  .hover-target {
    fill: transparent;
    stroke: transparent;
  }

  .line {
    fill: transparent;
    stroke-width: 1.25;
  }

  .area {
    fill: none;
  }

  .axis {
    line,
    path {
      stroke: $grey-blue;
    }

    text {
      fill: darken($grey-blue, 20%);
    }
  }

  .gridlines {
    path {
      stroke-width: 0;
    }

    line {
      stroke: lighten($grey-blue, 10%);
      stroke-dasharray: 5 10;
    }
  }

  .line-chart-annotations {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    pointer-events: none;
  }

  @each $name, $pair in $colors {
    $color: nth($pair, 1);

    .area.is-#{$name} {
      .line {
        stroke: $color;
      }
    }

    linearGradient {
      &.is-#{$name} {
        > .start {
          stop-color: $color;
          stop-opacity: 0.6;
        }

        > .end {
          stop-color: $color;
          stop-opacity: 0.05;
        }
      }
    }
  }

  @each $name, $scale in $chart-scales {
    @include standard-gradient($name, nth($scale, -1));
    .area.#{$name} .line {
      stroke: nth($scale, -1);
    }

    @each $color in $scale {
      @include standard-gradient((#{$name}-#{index($scale, $color)}), $color);
      .area.#{$name}-#{index($scale, $color)} .line {
        stroke: $color;
      }
    }
  }
}