/*
 * Use CSS variables for each grade. Allows finer control of element styling;
 */
.grade--a {
  --color: #21578A;
}

.grade--b {
  --color: #4C8C40;
}

.grade--c {
  --color: #F5B21E;
}

.grade--d {
  --color: #E87524;
}

.grade--f {
  --color: #D01F30;
}

.grade--none {
  --color: #EEE;
}

.grade--f1 {
  --color: rgb(216, 62, 72);
}

.grade--f2 {
  --color: rgb(228, 125, 134);
}

.grade--f3 {
  --color: rgb(232, 144, 152);
}

.grade--f4 {
  --color: rgb(239, 181, 186);
}

.grade--f5 {
  --color: rgb(248, 224, 225);
  --text: #1C1C1B;
}

.wp-block-scores-by-report .grade--a {
  --color: #21578A;
}
.wp-block-scores-by-report .grade--b {
  --color: #4C8C40;
}
.wp-block-scores-by-report .grade--c {
  --color: #F5B21E;
}
.wp-block-scores-by-report .grade--d {
  --color: #E87524;
}
.wp-block-scores-by-report .grade--f {
  --color: #D01F30;
}
.wp-block-scores-by-report .grade--none {
  --color: #EEE;
}
.wp-block-scores-by-report .grade--f1 {
  --color: rgb(216, 62, 72);
}
.wp-block-scores-by-report .grade--f2 {
  --color: rgb(228, 125, 134);
}
.wp-block-scores-by-report .grade--f3 {
  --color: rgb(232, 144, 152);
}
.wp-block-scores-by-report .grade--f4 {
  --color: rgb(239, 181, 186);
}
.wp-block-scores-by-report .grade--f5 {
  --color: rgb(248, 224, 225);
  --text: #1C1C1B;
}
.wp-block-scores-by-report button[name=toggle_data_group] {
  background-color: transparent;
  border-color: var(--color, #A4A4A4);
  transition: background-color 0.25s linear;
}
.wp-block-scores-by-report button[name=toggle_data_group].active {
  background-color: var(--color);
  color: #fff;
}
.wp-block-scores-by-report__header .grade__indicator {
  background-color: var(--color);
}
.wp-block-scores-by-report__header button {
  transition: background-color 0.25s linear;
}
.wp-block-scores-by-report__group.hidden {
  display: none;
}
.wp-block-scores-by-report .country_name > a {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0);
  transition: text-decoration-color 0.25s linear;
}
.wp-block-scores-by-report .country_name > a:hover {
  text-decoration-color: currentColor;
}