// The one and only anchor link that brings user back to top
.top {
  --color-background-top: #f5f5f5;
  --color-background-top-hover: #f0f0f0;
  background-color: var(--color-background-top);
  border-radius: 2px;
  bottom: var(--spacing-container-padding-inline);
  color: var(--color-black);
  cursor: pointer;
  font-size: var(--typography-size-16);
  height: 1.875rem;
  line-height: 1.875rem;
  opacity: 0;
  position: fixed;
  right: var(--spacing-container-padding-inline);
  text-align: center;
  text-decoration: none;
  transition: 500ms opacity;
  visibility: hidden;
  width: 1.875rem;
  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;
}