/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-map-legend {
  position: absolute;
  bottom: calc(var(--strand-space-6) + 6rem);
  right: var(--strand-space-4);
  z-index: 10;
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  letter-spacing: var(--strand-tracking-wide);
  color: rgba(148, 163, 184, 0.6);
  display: flex;
  flex-direction: column;
  gap: var(--strand-space-2);
  background: rgba(15, 25, 42, 0.7);
  border: 1px solid var(--strand-instrument-border);
  border-radius: var(--strand-radius-md);
  padding: var(--strand-space-3) var(--strand-space-4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--strand-instrument-shadow-inset), var(--strand-instrument-shadow-soft);
}

.strand-map-legend__title {
  font-weight: var(--strand-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--strand-tracking-widest);
  color: rgba(148, 163, 184, 0.4);
  margin-bottom: var(--strand-space-1);
  display: flex;
  align-items: center;
  gap: var(--strand-space-2);
}

.strand-map-legend__title::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--strand-instrument-glow-strong);
  border-radius: var(--strand-radius-full);
  animation: strand-instrument-breathe 3s var(--strand-ease-in-out-sine) infinite;
}

.strand-map-legend__item {
  display: flex;
  align-items: center;
  gap: var(--strand-space-3);
  padding: 2px 0;
  cursor: pointer;
  transition: color var(--strand-duration-fast) ease;
}

.strand-map-legend__item:hover {
  color: rgba(226, 232, 240, 0.9);
}

.strand-map-legend__item:hover .strand-map-legend__dot {
  transform: scale(1.4);
  filter: brightness(1.3);
}

.strand-map-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--strand-radius-full);
  transition:
    transform var(--strand-duration-fast) var(--strand-ease-out-expo),
    filter var(--strand-duration-fast) ease;
}

.strand-map-legend__dot--tech {
  background: var(--strand-sector-tech);
  box-shadow: 0 0 8px rgba(59, 142, 246, 0.5);
}

.strand-map-legend__dot--health {
  background: var(--strand-sector-health);
  box-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
}

.strand-map-legend__dot--trades {
  background: var(--strand-sector-trades);
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.5);
}

.strand-map-legend__dot--finance {
  background: var(--strand-sector-finance);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
}

@media (max-width: 640px) {
  .strand-map-legend {
    display: none;
  }
}