:host {
  display: block;
}

.location-node {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  min-inline-size: 8.5rem;
  padding: 0;
  border: 0;
  color: var(--ar-text);
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: center;
  text-shadow: 0 0.15rem 0.55rem rgb(0 0 0 / 0.95);
}

.location-node:disabled {
  cursor: default;
  opacity: 1;
}

.location-node__marker {
  inline-size: 1.35rem;
  block-size: 1.35rem;
  border: 0.18rem solid var(--ar-gold);
  border-radius: 50%;
  background: radial-gradient(circle, #211b13 26%, #8d6533 30%, #17191b 68%);
  box-shadow:
    0 0 0 0.15rem rgb(6 8 9 / 0.75),
    0 0 0.75rem rgb(208 162 84 / 0.42);
}

.location-node__name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  line-height: 1.2;
}

.location-node__state {
  color: var(--ar-gold);
  font-size: var(--ar-font-sm);
  font-weight: 700;
}

.location-node--current .location-node__marker {
  border-color: var(--ar-blue);
  box-shadow:
    0 0 0 0.15rem rgb(6 8 9 / 0.75),
    0 0 0.9rem rgb(92 169 216 / 0.8);
}

.location-node--current .location-node__state {
  color: var(--ar-success);
}

.location-node--selected .location-node__marker,
.location-node:not(:disabled):hover .location-node__marker {
  border-color: #e1bd72;
  box-shadow:
    0 0 0 0.15rem rgb(6 8 9 / 0.75),
    0 0 1rem rgb(225 189 114 / 0.85);
}
