.chart {
  &__table {
    td,
    th {
      padding: $baseline * 0.5 5px;
      border: 1px solid $color-brand--white;
    }

    th {
      background: #ccc;
    }

    tr:nth-child(even) {
      background: #efefef;
    }
  }

  &__charts {
    &--donut {
      max-width: 325px;

      svg {
        overflow: visible !important; //overule inline styling
      }
    }

    &--column {
      height: 375px !important;
    }

    &--line {
      height: 300px !important;
    }

    .google-visualization-tooltip {
      @include font-style('body--m');
      border: none !important;
      border-radius: $border-radius !important; //overule inline styling
      background-color: $chart-tooltip-color !important; //overule inline styling
      path[fill='#ffffff'] {
        fill: $chart-tooltip-color;
        stroke: $chart-tooltip-stroke-color;
      }

      text[fill='#000000'] {
        fill: $color-brand--two;
      }
    }
  }

  &__legend {
    @include font-style('body--m', 'body--l');
    margin-top: $baseline * -2;

    ul {
      display: inline-flex;
      flex-wrap: wrap;
      margin-top: $spacing--s;
    }

    li {
      margin-right: 30px;
      margin-left: 10px;
      display: inline-table;

      &::before {
        border-radius: 50%;
        content: '';
        display: inline-block;
        height: $baseline * 1;
        margin-left: -10px;
        margin-right: 5px;
        width: 10px;
      }
    }
  }
}

@include viewport--l {
  .chart__charts {
    &--donut {
      max-width: 387px;
    }

    &--column {
      height: 500px;
    }

    &--line {
      height: 450px !important; //overule inline styling
    }
  }

  .chart__legend {
    margin-top: -$spacing--m;
  }
}

// background mappings
@include chart-background-mapping;

.chart {
  // text
  text[fill='#444444'] {
    @include font-style('body--xs', 'body--m');
    @include color-dark-shade-alternative;
  }

  text[fill='#222222'] {
    @include font-style('body--xs', 'body--m');
    @include color-dark-shade-alternative;
  }
  // borders
  rect[fill='#cccccc'],
  rect[fill='#ebebeb'],
  rect[fill='#333333'] {
    fill: $color--grey;
  }

  // set chart element colors
  @include chart-element-color('#f0f0f0', $chart-element-color--1);
  @include chart-element-color('#e8e8e8', $chart-element-color--2);
  @include chart-element-color('#e0e0e0', $chart-element-color--3);
  @include chart-element-color('#dcdcdc', $chart-element-color--4);
  @include chart-element-color('#d8d8d8', $chart-element-color--5);
  @include chart-element-color('#d3d3d3', $chart-element-color--6);
  @include chart-element-color('#d0d0d0', $chart-element-color--7);
  @include chart-element-color('#c8c8c8', $chart-element-color--8);
  @include chart-element-color('#c0c0c0', $chart-element-color--9);
  @include chart-element-color('#bebebe', $chart-element-color--10);
  @include chart-element-color('#b8b8b8', $chart-element-color--11);
  @include chart-element-color('#b0b0b0', $chart-element-color--12);
  @include chart-element-color('#a9a9a9', $chart-element-color--13);
  @include chart-element-color('#a8a8a8', $chart-element-color--14);
  @include chart-element-color('#a0a0a0', $chart-element-color--15);
}