//
// Scroll to top
//
.scroll-to-top {
  @include icon(circle-arrow-up);
  background: transparent;
  bottom: $grid-gutter;
  cursor: pointer;
  height: (2 * $grid-gutter);
  opacity: 0;
  position: fixed;
  right: $grid-gutter;
  width: (2 * $grid-gutter);
  z-index: 2;

  &:before {
    background: $color-bg-light;
    border-radius: 50%;
    color: $color-interaction;
    display: block;
    font-size: 2rem;
    line-height: (2 * $grid-gutter);
    text-align: center;
  }

  &:hover,
  &:focus {
    text-decoration: none !important;
    background: transparent;
    &:before {
      color: $color-interaction;

    }
  }


  .js & {
    transition: opacity 1s ease-in-out;
    visibility: visible;
  }

  .is-scrolling & {
    opacity: 1;
    transition: opacity 1s ease-out;
  }

  // Hide after 1.5s at bottom,
  // to keep .footer__footer_menu accessible.
  .is-scrolled-bottom & {
    opacity: 0;
    transition: visibility 0s 1.5s, opacity 1.5s ease-in-out;
    visibility: hidden;
  }
}
