.pga-intensity-0 {
  background-color: lightgray;

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

.intensity-0 {
  border: 1px solid #80808047;
  color: white;
  background-color: #202020;
  box-sizing: border-box;

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

.intensity-1 {
  border: 1px solid #004183;
  color: white;
  background-color: #003264;
  box-sizing: border-box;

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

.intensity-2 {
  border: 1px solid #0179f1;
  color: white;
  background-color: #0064C8;
  box-sizing: border-box;

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

.intensity-3 {
  border: 1px solid #26a73c;
  color: white;
  background-color: #1E9632;
  box-sizing: border-box;

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

.intensity-4 {
  border: 1px solid #ffd53c;
  color: black;
  background-color: #FFC800;
  box-sizing: border-box;

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

.intensity-5 {
  border: 1px solid #ffab33;
  color: black;
  background-color: #FF9600;
  box-sizing: border-box;

  &:empty::after {
    content: "5⁻";
  }
}

.intensity-6 {
  border: 1px solid #ff7f2c;
  color: black;
  background-color: #FF6400;
  box-sizing: border-box;

  &:empty::after {
    content: "5⁺";
  }
}

.intensity-7 {
  border: 1px solid #ff3535;
  color: white;
  background-color: #FF0000;
  box-sizing: border-box;

  &:empty::after {
    content: "6⁻";
  }
}

.intensity-8 {
  border: 1px solid #c90000;
  color: white;
  background-color: #C00000;
  box-sizing: border-box;

  &:empty::after {
    content: "6⁺";
  }
}

.intensity-9 {
  border: 1px solid #9e00d3;
  color: white;
  background-color: #9600C8;
  box-sizing: border-box;

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

.intensity-unknow {
  border: 1px solid #80808047;
  color: white;
  background-color: #202020;
  box-sizing: border-box;
  font-size: 14px;
}

.intensity-box {
  display: grid;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 25%;
}