// ------------------------------------------------------------
// Back to top link
//
// The one and only anchor link that brings user back to top
// when hitting the rock bottom.
// ------------------------------------------------------------

.top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: $color_body;
  width: 50px;
  height: 50px;
  text-decoration: none;
	opacity: 0;
	transition: opacity .3s 0s, visibility 0s .3s;
  z-index: 10000;

	&.is-visible,
  &.fade-out,
  .no-touch &:hover {
		transition: opacity .3s 0s, visibility 0s 0s;
	}

	&.is-visible { // The button becomes visible
		opacity: 1;
	}

	&.fade-out { // If the user keeps scrolling down, the button is out of focus and becomes less visible
		opacity: .3;

    &:hover {
      opacity: 1;
    }
	}

	.no-touch &:hover {
		opacity: 1;
	}

  svg {
    @include centered();
    position: absolute;
    fill: #fff;
    margin: 0;
    opacity: .8;
    font-size: 19px;
    transition: all .3s ease;
  }

  &:hover,
  &:focus,
  &:active {
    background: $color_links;

    svg {
      fill: #fff;
      top: 35%;
    }
  }
}