$chartline-dimensions: 24px;

.chartline {
  @include textstyle-smallbold;
  color: $color-light1;
  display: inline-block;
  padding-bottom: $gridspacing * 3;
  padding-top: $gridspacing * 3;
  position: relative;

  .chartline-x-start,
  .chartline-x-end {
    position: absolute;
  }

  svg {
    display: block;
    height: auto;
    position: relative;
    width: 100%;
    z-index: $z-index-medium;
  }

  .chartline-x-average {
    bottom: 0;
    left: 0;
    padding-bottom: $gridspacing + 2px;
    position: absolute;
    width: 100%;

    span {
      position: relative;
      z-index: $z-index-high;
    }

    &::after {
      background-color: $color-dark2;
      border-radius: 500px; //High value makes pill shape
      bottom: 0;
      content: '';
      display: block;
      height: 2px;
      left: 0;
      position: absolute;
      width: 100%;
      z-index: $z-index-low;
    }

  }

  // Has a terminus to cover the last data point, padding and positioning offset it

  .chartline-x-data {
    padding-right: $chartline-dimensions / 2;
    padding-top: $chartline-dimensions / 2;
    position: relative;

    &::after {
      background-color: $color-accent6;
      border-radius: 100%;
      content: '';
      display: block;
      height: $chartline-dimensions;
      position: absolute;
      right: 0;
      top: 0;
      width: $chartline-dimensions;
    }

  }

  .chartline-x-end {
    right: 0;
    text-align: right;
    top: 0;
  }

  .chartline-x-line {
    fill: transparent;
    stroke: $color-accent6;
    stroke-width: 4;
  }

  .chartline-x-start {
    bottom: 0;
    left: 0;
  }

}