.station-marker {
  --icon-size: 20px;
  --border-size: 2px;

  width: var(--icon-size);
  height: var(--icon-size);

  box-sizing: border-box;

  transition-property: opacity, display;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  /* https://caniuse.com/mdn-css_properties_display_is_transitionable */
  transition-behavior: allow-discrete, allow-discrete;

  opacity: 1;

  &:has(.station-icon:hover) {
    z-index: 1;
  }

  /* Enter/Exit transitions when filtering */
  #map[data-hidden-types*=',heavy-rail,'] &[data-mode-type='heavy-rail'],
  #map[data-hidden-types*=',light-rail,'] &[data-mode-type='light-rail'],
  #map[data-hidden-types*=',metro-subway,'] &[data-mode-type='metro-subway'],
  #map[data-hidden-types*=',heritage-railway,'] &[data-mode-type='heritage-railway'],
  #map[data-hidden-types*=',people-mover,'] &[data-mode-type='people-mover'],
  #map[data-hidden-types*=',ferry-riverboat,'] &[data-mode-type='ferry-riverboat'] {
    display: none !important;
    opacity: 0 !important;
  }

  @starting-style {
    opacity: 0 !important;
  }
}

.station-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  --gap: 1px;

  cursor: pointer;

  background-color: white;
  border: var(--border-size) solid var(--type-color, white);
  border-radius: 50%;

  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-clip: padding-box;

  transform-origin: center center;
  transition: transform 0.15s ease-out;

  overflow: hidden;

  box-sizing: border-box;

  &:hover {
    transform: scale(1.5);
  }
}

/* Popups */

.maplibregl-popup-content {
  font-family: 'Radio Canada Big', sans-serif;
  font-style: normal;
  font-optical-sizing: auto;
  font-size: 15px;
  border-radius: 6px;
}

.name {
  margin: 0;
  padding: 0;
  margin-top: 2px;
  font-size: 1.25em;
  font-weight: bold;
}

.code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8em;
  margin-left: 4px;
}

.name-en {
  margin: 0;
  padding: 0;
  margin-top: 2px;
  font-size: 0.8em;
  font-style: italic;
  font-weight: normal;
}

.brand,
.country {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  margin-top: 8px;
}

.brand-icon {
  display: block;
  width: 28px;
  height: 28px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.country {
  font-size: 0.85em;
}

.country-flag {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.visited {
  margin: 0;
  padding: 0;
  margin-top: 8px;
  color: #666;
}

.type {
  margin: 0;
  margin-top: 6px;
  padding: 8px 4px;
  text-align: center;
  line-height: 1;
  background: var(--type-color);
  color: var(--type-color-fg);
}

/* Types */

[data-mode-type='heavy-rail'] {
  --type-color: #f44336;
  --type-color-fg: white;
}

[data-mode-type='light-rail'] {
  --type-color: #34941c;
  --type-color-fg: white;
}

[data-mode-type='metro-subway'] {
  --type-color: #36bde2;
  --type-color-fg: black;
}

[data-mode-type='heritage-railway'] {
  --type-color: #9c4c16;
  --type-color-fg: white;
}

[data-mode-type='people-mover'] {
  --type-color: #9733c2;
  --type-color-fg: white;
}

[data-mode-type='ferry-riverboat'] {
  --type-color: #3949c1;
  --type-color-fg: white;
}