.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: $color-brand--four !important; //overule inline styling
      path[fill="#ffffff"] {
        fill: $color-brand--four;
        stroke: $color-brand--four;
      }

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

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

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

    li {
      margin-right: 30px;

      &::before {
        border-radius: 50%;
        content: '';
        display: inline-block;
        height: $baseline * 1;
        margin-right: 10px;
        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;
  }
}


.bg-brand--off-white {
  .chart {
    .google-visualization-tooltip {
      background-color: $color-brand--white !important; //overule inline styling

      path[fill="#ffffff"] {
        fill: $color-brand--white;
        stroke: $color--grey;
      }
    }
  }
}

.chart {
  text[fill="#444444"] {
    @include font-style('body--s', 'body--m');
    fill: $color--two-50;
  }

  text[fill="#222222"] {
    @include font-style('body--s', 'body--m');
    fill: $color-brand--two;
  }

  rect[fill="#cccccc"], rect[fill="#ebebeb"], rect[fill="#333333"] {
    fill: $color--grey;
  }

  [stroke="#f0f0f0"] {
    stroke: $color-brand--two;
  }

  [fill="#f0f0f0"] {
    fill: $color-brand--two;
  }

  [data-rs-charts-legend-item="#f0f0f0"]::before {
    background: $color-brand--two;
  }

  [stroke="#e8e8e8"] {
    stroke: $color-brand--one;
  }

  [fill="#e8e8e8"] {
    fill: $color-brand--one;
  }

  [data-rs-charts-legend-item="#e8e8e8"]::before {
    background: $color-brand--one;
  }

  [stroke="#e0e0e0"] {
    stroke: $color-brand--three;
  }

  [fill="#e0e0e0"] {
    fill: $color-brand--three;
  }

  [data-rs-charts-legend-item="#e0e0e0"]::before {
    background: $color-brand--three;
  }

  [stroke="#dcdcdc"] {
    stroke: $color-brand--six;
  }

  [fill="#dcdcdc"] {
    fill: $color-brand--six;
  }

  [data-rs-charts-legend-item="#dcdcdc"]::before {
    background: $color-brand--six;
  }

  [stroke="#d8d8d8"] {
    stroke: $color-brand--five;
  }

  [fill="#d8d8d8"] {
    fill: $color-brand--five;
  }

  [data-rs-charts-legend-item="#d8d8d8"]::before {
    background: $color-brand--five;
  }
  //65%
  [stroke="#d3d3d3"] {
    stroke: $color-brand--two-65;
  }

  [fill="#d3d3d3"] {
    fill: $color-brand--two-65;
  }

  [data-rs-charts-legend-item="#d3d3d3"]::before {
    background: $color-brand--two-65;
  }

  [stroke="#d0d0d0"] {
    stroke: $color-brand--one-65;
  }

  [fill="#d0d0d0"] {
    fill: $color-brand--one-65;
  }

  [data-rs-charts-legend-item="#d0d0d0"]::before {
    background: $color-brand--one-65;
  }

  [stroke="#c8c8c8"] {
    stroke: $color-brand--three-65;
  }

  [fill="#c8c8c8"] {
    fill: $color-brand--three-65;
  }

  [data-rs-charts-legend-item="#c8c8c8"]::before {
    background: $color-brand--three-65;
  }

  [stroke="#c0c0c0"] {
    stroke: $color-brand--six-65;
  }

  [fill="#c0c0c0"] {
    fill: $color-brand--six-65;
  }

  [data-rs-charts-legend-item="#c0c0c0"]::before {
    background: $color-brand--six-65;
  }

  [stroke="#bebebe"] {
    stroke: $color-brand--five-65;
  }

  [fill="#bebebe"] {
    fill: $color-brand--five-65;
  }

  [data-rs-charts-legend-item="#bebebe"]::before {
    background: $color-brand--five-65;
  }
  //45%
  [stroke="#b8b8b8"] {
    stroke: $color-brand--two-45;
  }

  [fill="#b8b8b8"] {
    fill: $color-brand--two-45;
  }

  [data-rs-charts-legend-item="#b8b8b8"]::before {
    background: $color-brand--two-45;
  }

  [stroke="#b0b0b0"] {
    stroke: $color-brand--one-45;
  }

  [fill="#b0b0b0"] {
    fill: $color-brand--one-45;
  }

  [data-rs-charts-legend-item="#b0b0b0"]::before {
    background: $color-brand--one-45;
  }

  [stroke="#a9a9a9"] {
    stroke: $color-brand--three-45;
  }

  [fill="#a9a9a9"] {
    fill: $color-brand--three-45;
  }

  [data-rs-charts-legend-item="#a9a9a9"]::before {
    background: $color-brand--three-45;
  }

  [stroke="#a8a8a8"] {
    stroke: $color-brand--six-45;
  }

  [fill="#a8a8a8"] {
    fill: $color-brand--six-45;
  }

  [data-rs-charts-legend-item="#a8a8a8"]::before {
    background: $color-brand--six-45;
  }

  [stroke="#a0a0a0"] {
    stroke: $color-brand--five-45;
  }

  [fill="#a0a0a0"] {
    fill: $color-brand--five-45;
  }

  [data-rs-charts-legend-item="#a0a0a0"]::before {
    background: $color-brand--five-45
  }
}
