/* FAQ quick-reference magnet ratings — Figma node 1482:12614 (540 × 360; 150px magnets) */

.country-rating {
  container-type: inline-size;
  width: min(var(--country-rating-width, 540px), 100%);
  color: var(--color-text-primary);
}

.country-rating:empty,
.country-rating[data-state="fallback"] {
  display: none;
}

.country-rating__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 8.333333%;
  row-gap: 11.111111cqi;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.country-rating__tile {
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1;
}

.country-rating__tile-content {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: top left;
}

.country-rating__tile:nth-child(1) .country-rating__tile-content { transform: rotate(9deg); }
.country-rating__tile:nth-child(2) .country-rating__tile-content { transform: rotate(-3deg); }
.country-rating__tile:nth-child(3) .country-rating__tile-content { transform: rotate(3deg); }
.country-rating__tile:nth-child(4) .country-rating__tile-content { transform: rotate(-9deg); }
.country-rating__tile:nth-child(5) .country-rating__tile-content { transform: rotate(6deg); }
.country-rating__tile:nth-child(6) .country-rating__tile-content { transform: rotate(-6deg); }

.country-rating__disc,
.country-rating__shadow,
.country-rating__dot {
  position: absolute;
  max-width: none;
}

.country-rating__disc {
  inset: 2%;
  width: 96%;
  height: 96%;
}

.country-rating__shadow {
  left: 5.566667%;
  top: 29.166667%;
  width: 95.54%;
  height: 73.036%;
}

.country-rating__dot {
  width: 4%;
  height: 4%;
}

.country-rating__icons {
  position: absolute;
  top: 15.333333%;
  left: 13.333333%;
  display: flex;
  width: 70%;
  height: 40%;
}

.country-rating__icon {
  display: block;
  flex: 0 0 57.142857%;
  width: 57.142857%;
  height: 100%;
  background-color: currentcolor;
  -webkit-mask: var(--rating-icon) center / var(--rating-icon-width) var(--rating-icon-height) no-repeat;
  mask: var(--rating-icon) center / var(--rating-icon-width) var(--rating-icon-height) no-repeat;
}

.country-rating__icon--info {
  --rating-icon-width: 100%;
  --rating-icon-height: 100%;

  color: var(--color-icon-neutral);
}

.country-rating__icon--heart {
  margin-left: -14.285714%;
  --rating-icon-width: 100%;
  --rating-icon-height: 100%;
}

.country-rating__tile--great .country-rating__icon--heart {
  color: var(--color-icon-primary);
}

.country-rating__tile--good .country-rating__icon--heart {
  color: var(--color-icon-secondary);
}

.country-rating__tile--not-great .country-rating__icon--heart {
  color: var(--color-icon-tertiary);
}

.country-rating__label {
  position: absolute;
  top: 55.333333%;
  left: 50%;
  width: 86.666667%;
  color: var(--color-text-neutral);
  font-family: var(--type-family-display), monospace;
  font-size: clamp(12px, 3vw, 24px);
  font-size: 16cqi;
  font-weight: var(--type-weight-regular);
  font-variation-settings: "CRSV" 0, "ELSH" 0, "ELXP" 0;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}