// The one and only anchor link that brings user back to top
.top {
  background-color: var(--color-background-top);
  border-radius: 2px;
  bottom: var(--padding-container-horizontal);
  color: var(--color-black);
  cursor: pointer;
  font-size: var(--font-size-16);
  height: 3rem;
  line-height: 30px;
  opacity: 0;
  position: fixed;
  right: var(--padding-container-horizontal);
  text-align: center;
  text-decoration: none;
  transition: 500ms opacity;
  visibility: hidden;
  width: 3rem;
  z-index: 1;

  &:hover {
    background-color: var(--color-background-top-hover);
  }

  &:focus {
    background-color: var(--color-background-top);
  }
}

.top.is-visible {
  opacity: 1;
  visibility: visible;
}