@import 'colors';

body {
  font: 11px 'Open Sans';
}

svg {
  padding: 20px;

  .first { fill: $green; }
  .second { fill: $blue; }
  .third { fill: $orange; }
  .fourth { fill: $violet; }

  circle {
    &:nth-child(1) { stroke: none; fill: $grey-light; }
    &:nth-child(2) { stroke: none; fill: $grey; }
    &:nth-child(3) { stroke: none; fill: $grey-dark; }
    &:nth-child(4) { stroke: none; fill: $grey-darkest; }
  }

  circle, polygon {
    stroke: $white;
  }

  line {
    stroke: $grey-alpha-03;
  }

  text {
    &.first, &.second, &.third, &.fourth {
      font-size: 16px;
      font-weight: bold;
    }

    &.blip-text {
      font-size: 9px;
      font-style: italic;
      fill: $white;
    }

    &.line-text {
      font-weight: bold;
      text-transform: uppercase;
      fill: $black;
    }
  }
}

.radar-ref-table {
  width: 1080px;
  font-size: 16px;
  line-height: 26px;
  padding: 20px;

  tr:nth-child(odd) {
    background: $grey-darkest;
  }

  tr:nth-child(even) {
    background: $grey;
  }

  td {
    padding: 10px 15px;
  }

  tr.radar-ref-status-group {
    font-size: 20px;
    font-weight: bold;
    background: $grey-lightest;
  }
}