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

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

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

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

  .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;
    }
  }

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

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

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

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