/*
  Getting Started Explore Graphic
  ------------------------------------------------------------------------------
*/

$explore-graphic-anim-time: 0.5s;

.explore-graphic--bg {
  fill: $g2-kevlar;
}

.explore-graphic--hex {
  fill: $g4-onyx;
  transition: fill 0.25s ease;
}

.hex-a {
  fill: $c-pool;
}
.hex-b {
  fill: $c-honeydew;
}

.explore-graphic--text {
  stroke: transparent;
  fill: none;
  transition: stroke $explore-graphic-anim-time ease;
}

.explore-graphic--diagnostic {
  fill: transparent;
  transition: fill $explore-graphic-anim-time ease;
}

@keyframes flow {
  0% {
    stroke-dashoffset: 0px;
  }
  100% {
    stroke-dashoffset: 8px;
  }
}

.explore-graphic--flow {
  fill: none;
  stroke-width: 2px;
  stroke-dasharray: 4px;
  stroke-dashoffset: 0px;
}

.flow-a {
  stroke: $c-honeydew;
}

.flow-b {
  stroke: $c-pool;
  animation-direction: reverse;
}

/* Hover State */
.getting-started--image__animating {
  .explore-graphic--hex {
    fill: $g5-pepper;
  }
  .explore-graphic--text {
    stroke: $g13-mist;
  }
  .hex-a,
  .diagnostic-a {
    fill: $c-pool;
  }
  .hex-b,
  .diagnostic-b {
    fill: $c-honeydew;
  }
  .explore-graphic--flow {
    animation: flow 1s linear infinite;
  }
}
