:root {
  --intensity-0: #202020;
  --intensity-1: #004080;
  --intensity-2: #0070e0;
  --intensity-3: #1e9632;
  --intensity-4: #ffc800;
  --intensity-5: #ff9600;
  --intensity-6: #ff6400;
  --intensity-7: #ff0000;
  --intensity-8: #c00000;
  --intensity-9: #9600c8;
  --intensity-unknow: #202020;
}

.intensity-0 {
  color: #fff;
  outline: 1px solid #808080;
  background-color: #202020;

  &::after {
    content: "0";
  }
}

.intensity-1 {
  color: #fff;
  background-color: var(--intensity-1);

  .inner {
    fill: var(--intensity-1);
  }

  .outer {
    fill: #fff;
  }

  &::after {
    content: "1";
  }
}

.intensity-2 {
  color: #fff;
  background-color: var(--intensity-2);

  .inner {
    fill: var(--intensity-2);
  }

  .outer {
    fill: #fff;
  }

  &::after {
    content: "2";
  }
}

.intensity-3 {
  color: #fff;
  background-color: var(--intensity-3);

  .inner {
    fill: var(--intensity-3);
  }

  .outer {
    fill: #fff;
  }

  &::after {
    content: "3";
  }
}

.intensity-4 {
  color: #000;
  background-color: var(--intensity-4);

  .inner {
    fill: var(--intensity-4);
  }

  .outer {
    fill: #fff;
  }

  &::after {
    content: "4";
  }
}

.intensity-5 {
  color: #000;
  background-color: var(--intensity-5);

  .inner {
    fill: var(--intensity-5);
  }

  .outer {
    fill: #fff;
  }

  &::after {
    content: "5⁻";
    letter-spacing: -1px;
  }
}

.intensity-6 {
  color: #fff;
  background-color: var(--intensity-6);

  .inner {
    fill: var(--intensity-6);
  }

  .outer {
    fill: #fff;
  }

  &::after {
    content: "5⁺";
    letter-spacing: -1px;
  }
}

.intensity-7 {
  color: #fff;
  background-color: var(--intensity-7);

  .inner {
    fill: var(--intensity-7);
  }

  .outer {
    fill: #fff;
  }

  &::after {
    content: "6⁻";
    letter-spacing: -1px;
  }
}

.intensity-8 {
  color: #fff;
  background-color: var(--intensity-8);

  .inner {
    fill: var(--intensity-8);
  }

  .outer {
    fill: #fff;
  }

  &::after {
    content: "6⁺";
    letter-spacing: -1px;
  }
}

.intensity-9 {
  color: #fff;
  background-color: var(--intensity-9);

  .inner {
    fill: var(--intensity-9);
  }

  .outer {
    fill: #fff;
  }

  &::after {
    content: "7";
  }
}

.intensity-unknow {
  color: #fff;
  background-color: var(--intensity-unknow);

  .inner {
    fill: var(--intensity-unknow);
  }

  .outer {
    fill: #fff;
  }

  &::after {
    content: "?";
  }
}
