/* ==========================================================================
   Holder with mouse icon that tells the user he can scroll
   ========================================================================== */

.scroll-hinter

  position: absolute
  z-index: 15
  top: 0
  left: column(9.5)
  width: column(1.5)
  height: 0

  // Hide on small view
  +respond-to-width($smGridBreakpoint)
    display: none

  // Use this element to determine the height using padding
  .sizer
    width: 100%
    padding-bottom: 75%
    background: $blue
    border-top-left-radius: 500px
    border-top-right-radius: 500px
    +transform(translateY(-99%))

  // The mouse with the arrow
  .icon
    +position(absolute, 30% null null 38%)
    width: 24%
    cursor: pointer

    // Color the svg
    .mouse-body,
    .mouse-wheel,
    .arrow
      fill: #fff

    .arrow
      +transition(transform 200ms ease-out)

    &:hover
      .arrow
        +transform(translate3D(0,30%,0))


  .mouse-wheel
    animation: moveUpDown 1s ease-out infinite

// Up and down animation for mouse wheel
@keyframes moveUpDown
  0%
    +transform(translate3D(0,0,0))
  50%
    +transform(translate3D(0,5%,0))
  100%
    +transform(translate3D(0,0,0))