.nb-world-map {
  --nb-world-map-ocean: #000000;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  user-select: none;
  background-color: var(--nb-world-map-ocean);
}

.nb-world-map__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-mask-image: none;
  mask-image: none;
}

.nb-world-map.nb-world-map--fade-edges .nb-world-map__svg,
.nb-world-map[data-fade-edges="1"] .nb-world-map__svg {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.nb-world-map[data-fade-edges="0"] .nb-world-map__svg {
  -webkit-mask-image: none;
  mask-image: none;
  -webkit-mask-composite: unset;
  mask-composite: unset;
}

.nb-world-map__error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  opacity: 0.8;
}