.ps-map {
  position: relative;
}

.ps-map-svg * {
    vector-effect: non-scaling-stroke;
}

.ps-map-svg .country {
/*  color: var(--map-country-fill-color, #cccccc);*/
  fill: currentColor;
  stroke: var(--map-country-stroke-color, #ffffff);
/*  transition: fill 250ms linear;*/
}
.ps-map-svg .country:hover,
.ps-map-svg .country:focus {
/*  fill: hsl( from currentColor h s calc(l - 10) ) !important;*/
}

.ps-map-svg .country.interest {
  fill: var(--map-country-interest-fill-color, #aaaaaa);
}
.ps-map-svg .country.choropleth {
  fill: revert-layer;
}

.ps-map-graticule,
.ps-map-outline {
  pointer-events: none;
}

/* Hide Antarctic when no frame displayed. */
.ps-map-svg:not(:has(.ps-map-outline)) [data-iso="10"]{
    display: none;
}

.ps-map-legend [sub] {
  font-size: 0.75em;
  baseline-shift: -0.25em;
}
.ps-map-legend .tick text {
  font-family: sans-serif;
}

/* ========================================
 * Tooltip
 * ----------------------------------------
 */
.ps-map-tooltip {
  --ps-tooltip-border-size: 1px;
  --ps-tooltip-color: #efefef;
  --ps-tooltip-bg-color: #111111;
  
  position: absolute;
  left: -9999px; /* default off-screen */
  width: max-content;
  max-width: clamp(20ch, 30vw, 40ch);
  padding: .5em;
  
  background: var( --ps-tooltip-bg-color, #111111 );
  color: var( --ps-tooltip-color, #efefef );
  border: var(--ps-tooltip-border-size, 1px) solid currentColor;
  opacity: 0; /* hidden by default */
  
  font-size: 0.75rem;
  font-family: monospace;
  text-align: center;
  hyphens: auto;
  
  transform: translate(-50%, calc(-100% - 1em));

  transition: opacity 250ms linear;

  pointer-events: none; /* Maybe allow in future? */
}
.ps-map-tooltip::before,
.ps-map-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 0.5rem solid transparent;
}
.ps-map-tooltip::before {
  border-top-color: currentColor;
  border-width: calc(0.5rem + var( --ps-tooltip-border-size, 1px ) * 2);
  z-index: 0;
}
.ps-map-tooltip::after {
  border-top-color: var( --ps-tooltip-bg-color, #111111 );
  z-index: 1;
}

.ps-map-tooltip.tooltip-active {
  opacity: 1;
}

.ps-map-tooltip .ps-tooltip-title {
  font-weight:bold;
  display: block;
  margin-bottom: 0.5em;
}
.ps-tooltip-body {
  margin-bottom: 0.5em;
}
.ps-tooltip-label {
  display: block;
  color: hsl(from currentColor h s l / 0.5);
}

.ps-map-tooltip > :last-child {
  margin-bottom: 0;
}




/* Map Tour */
.ps-map-svg .active {
  color: var(--ps-map-country-active-color, red);
  fill: none;
  stroke: currentColor;
  transition: fill 250ms linear;
}

/* Map Custom Lines */
.ps-map-line {
  stroke: currentColor;
  fill: none;
  vector-effect: none;
}


/* ========================================
 * Effects for active Points/Bubbles
 * ----------------------------------------
 */
circle.has-tooltip,
circle.is-active,
path.has-tooltip,
path.is-active,
g.has-tooltip circle,
g.is-active circle {
  stroke: currentColor;
  animation: strokePulse 3s linear forwards infinite;
}

@keyframes strokePulse {
  from {
    stroke-width: 0;
    stroke-opacity: 1;
  }
  to {
    stroke-width: calc( var(--ps-map-point-radius, 8) * 2px );
    stroke-opacity: 0;
  }
}


/* Map HTML Data Title 
 * (Sits in <figure>, generally used for custom bubbles, i.e. manually controlled usign external JS)
 */
.ps-map-data-title {
  display: block;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
}