arcaneMapCss top-level constant

String const arcaneMapCss

CSS styles for ArcaneMap components.

Include this in your stylesheet's baseCss for proper map styling. Provides ShadCN base styles and Neon overrides.

Implementation

const String arcaneMapCss = '''
/* ============================================
   ARCANE MAP - Base Styles (ShadCN)
   ============================================ */

/* Map container */
.arcane-world-map,
.arcane-usa-map {
  position: relative;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Region paths */
.arcane-world-map path[data-region],
.arcane-usa-map path[data-region] {
  transition: fill 150ms ease, opacity 150ms ease;
}

.arcane-world-map path[data-region]:hover,
.arcane-usa-map path[data-region]:hover {
  fill: var(--accent) !important;
  opacity: 0.9;
}

/* Location pins */
.arcane-world-map circle[data-location],
.arcane-usa-map circle[data-location] {
  transition: fill 150ms ease, r 150ms ease;
}

.arcane-world-map circle[data-location]:hover,
.arcane-usa-map circle[data-location]:hover {
  fill: var(--primary) !important;
}

/* Debug tooltip */
.arcane-map-debug-tooltip {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
}

.arcane-map-debug-tooltip > div {
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 10px 14px;
}

.arcane-map-debug-tooltip .debug-lat,
.arcane-map-debug-tooltip .debug-lng {
  font-size: 13px;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--popover-foreground);
  white-space: nowrap;
  font-weight: 500;
}

.arcane-map-debug-tooltip .debug-svg {
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--muted-foreground);
  white-space: nowrap;
  margin-top: 6px;
}

.arcane-map-debug-tooltip .debug-hint {
  font-size: 11px;
  color: var(--primary);
  margin-top: 6px;
  font-weight: 500;
}

''';