/* country-popup */
.country-popup__postioned {
  position: absolute;
  right: -100%;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 1;
  transition: right 0.3s linear 0s;
  z-index: 2;
}

.country-popup-module.opened {
  right: 0;
}

.globe-popup.opened {
  right: calc(-1 * var(--x-offset));
}


.country-popup {
  --popup-bg: var(--clr-white);
  --popup-rows-gap: var(--sp6);
  --popup-width: 400px;
  --separator-clr: var(--clr-neutral-400);
  background: var(--popup-bg);
  padding: var(--sp10) var(--sp8) var(--sp8) var(--sp8);
  display: grid;
  grid-gap: var(--popup-rows-gap);
  color: var(--clr-gray-dark);
  width: var(--popup-width);
  position: relative;
  font-size: var(--fs-14);
}

.country-popup__header {
  display: flex;
  align-items: center;
  gap: var(--sp5);
}

.country-popup__title {
  margin: 0;
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  color: var(--clr-gray-dark);
  text-transform: uppercase;
}

.country-popup__flag {
  flex-shrink: 0;
  border: 1px solid #dbdbdb;
}

.country-popup__indicator {
  background: var(--clr-blue08);
  padding: var(--sp5) var(--sp6);
}

.country-popup__main-label {
  font-weight: var(--fw-bold);
  color: var(--clr-gray-dark);
  font-size: var(--fs-14);
}

.country-popup__indicator-label {
  padding-bottom: var(--sp1);
  border-bottom: 1px solid;
  line-height: 1.3;
  border-bottom: 1px solid var(--separator-clr);
}

.country-popup__indicator-value {
  display: flex;
  margin-top: var(--sp3);
  line-height: 1.2;
}

.country-popup__indicator-value>* {
  display: flex;
  align-items: center;
}

.country-popup__unit {
  font-weight: var(--fw-normal);
  padding-left: var(--sp3);
  margin-left: var(--sp3);
  border-left: 1px solid var(--separator-clr);
}

.country-popup__number {
  font-size: var(--fs-40);
  font-weight: var(--fw-bold);
  color: var(--clr-teal-500);
  line-height: 1;
}

.country-popup__list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp5);
  padding: var(--sp3) 0;
  line-height: 1.3;
  border-bottom: 1px solid var(--separator-clr);
}

.country-popup__list-item:first-child {
  border-top: 1px solid var(--separator-clr);
}

.country-popup__label {
  flex: 1;
}

.country-popup__value {
  font-weight: var(--fw-bold);
  color: var(--clr-blue-800);
  text-align: right;
}

.country-popup__close-wrap {
  position: absolute;
  top: 8px;
  right: 8px;
}

.country-popup__value-sub {
  display: flex;
  justify-content: flex-end;
}

.country-popup__value a {
  color: var(--clr-yellow-orange);
}

.country-popup__value a:hover {
  color: var(--clr-black);
}

/* sdg */
.country-popup__sdg-values {
  font-size: var(--fs-20);
  align-items: center;
  display: flex;
  border-top: 1px solid var(--separator-clr);
  padding-top: var(--sp2);
  gap: 5px;
}

.country-popup__sdg-field {
  margin-top: var(--sp2);
}

.country-popup__sdg-label {
  font-weight: var(--fw-normal);
}

.country-popup__sdg-value {
  font-size: inherit;
}