@charset 'utf-8';

#ButtonBackToTop {
  z-index: 100;
  position: fixed;
  bottom: 2.5rem;
  right: 1.25rem;
  width: 2.5rem;
  aspect-ratio: 1;
  background: var(--clr-accent-2);
  border: 2px solid var(--clr-accent-2);
  border-radius: 10px;
  cursor: pointer;

  display: none;

  &:hover,
  &:focus {
    background: var(--clr-accent-1);
    text-decoration: none;
    border-color: var(--clr-accent-1);
  }

  @media screen and (width >= 760px) {
    bottom: 3rem;
    right: 1.5rem;
    width: clamp(2.5rem, 1.7692rem + 1.5385vw, 3rem);
  }
}

.arrowBackToTop::before {
  content: '';
  position: absolute;
  inset: 30%;
  transform: translateY(20%) rotate(-45deg);
  border-top: 5px solid white;
  border-right: 5px solid white;
}

#ButtonBackToTop:hover,
#ButtonBackToTop:focus {
  & .LinkBackToTop::before {
    border-top: 5px solid white;
    border-right: 5px solid white;
  }
}