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

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

.intensity-unknow {
  color: var(--intensity-text-0);
  background-color: var(--intensity-0);
  box-sizing: border-box;
  font-size: 14px;
}

#max-pga[class*="intensity-"]::after {
  content: none;
}

.intensity-0 {
  color: var(--intensity-text-0);
  background-color: var(--intensity-0);
  box-sizing: border-box;

  &:not(#max-intensity, #max-pga)::after {
    content: "0";
  }
}

.intensity-1 {
  color: var(--intensity-text-1);
  background-color: var(--intensity-1);
  box-sizing: border-box;

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

.intensity-2 {
  color: var(--intensity-text-2);
  background-color: var(--intensity-2);
  box-sizing: border-box;

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

.intensity-3 {
  color: var(--intensity-text-3);
  background-color: var(--intensity-3);
  box-sizing: border-box;

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

.intensity-4 {
  color: var(--intensity-text-4);
  background-color: var(--intensity-4);
  box-sizing: border-box;

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

.intensity-5 {
  color: var(--intensity-text-5);
  background-color: var(--intensity-5);
  box-sizing: border-box;

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

.intensity-6 {
  color: var(--intensity-text-6);
  background-color: var(--intensity-6);
  box-sizing: border-box;

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

.intensity-7 {
  color: var(--intensity-text-7);
  background-color: var(--intensity-7);
  box-sizing: border-box;

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

.intensity-8 {
  color: var(--intensity-text-8);
  background-color: var(--intensity-8);
  box-sizing: border-box;

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

.intensity-9 {
  color: var(--intensity-text-9);
  background-color: var(--intensity-9);
  box-sizing: border-box;

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

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