/**
 * Line navigation, see `lineNavigation.js`.
 */

.line-navigation {
  position: relative;
  display: inline-block;
}

.line-navigation__image {
  /* Draws the image on top of the dot (both are positioned, and the image comes later in the HTML),
     so the dot only shows through the transparent gap inside the station ring. */
  position: relative;
  display: block;
  padding: 0;
  background: none;
}

.line-navigation__dot {
  position: absolute;
  /* Vertical position of the track in the image. */
  top: 129px;
  width: 16px;
  height: 16px;
  /* Centers the dot on the station. */
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: #e3906a;
}