.show-scroll
  +flex(center, center)
  position: absolute
  left: calc(50% - 40px)
  bottom: -40px
  z-index: 10
  width: 80px
  height: 40px
  cursor: pointer
  border-radius: 55px 55px 0 0

  &:after
    content: ''
    position: absolute
    left: 0
    top: -40px
    z-index: -1
    width: 80px
    height: 80px
    background: $color-secondary-600
    border-radius: 5px

  .arrow
    position: relative
    top: -50%
    z-index: 2
    display: inline-block
    width: 14px
    transform: translate3d(0,0,0)
    transition: transform 0.3s

    svg
      width: 100%

      path
        fill: white

  &:hover
    .arrow
      transform: translate3d(0,3px,0)

  +respond-to-width(900)
    width: 90px
    height: 45px
    left: calc(50% - 45px)
    &:after
      border-width: 0 45px 45px 45px

  +respond-to-width(640)
    display: none