line {
  z-index: 3;
}

.tick line {
  stroke: rgb(240, 240, 240);
}

path {
  stroke: $color-grey--lighter;
  stroke-width: 2px;
  z-index:0;
}

text {
  font-family: $fontFamily-sansSerif;
  border: 1px solid $color-text-default;
  font-size: $font-size-base - 5;
  color: $color-grey--light;
  fill: $color-grey--light;

  @media(min-width: 30em) {
    font-size: $font-size-base - 2;
  }
}

circle[class^="marker"] {
  z-index: 100;
  cursor: pointer;
  border: 6px solid $color-circle;
  stroke: $color-circle;
  stroke-width: 6px;
  fill: $color-circle;
}

circle[class^="marker"].is-active {
  fill: $color-circle-active;
  border: 6px solid $color-circle-active;
  stroke: $color-circle-active;
}

g[class^="marker-"] line,
g[class^="text-"] {
  opacity: 0;

  &.is-animating {
    -webkit-transition: all 1000ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    transition: all 1000ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  }
}

g[class^="marker-"].is-active circle,
g[class^="text-"].is-active circle {
  fill: $color-circle-active;
  border: 6px solid $color-circle-active;
  stroke: $color-circle-active;
}

g[class^="marker-"].is-active text,
g[class^="text-"].is-active text {
  color: $color-circle-active;
  fill: $color-circle-active;
  opacity: 1;
  stroke: $color-circle-active;
}

g[class^="marker-"].is-active line,
g[class^="text-"].is-active {
  stroke: $color-circle-active;
  opacity: 1;
}