.btn--scroll-top {
  --scroll-btn-size: 2.5rem;
  border: none;
  border-radius: 50%;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
  padding: 0;
  height: var(--scroll-btn-size);
  width: var(--scroll-btn-size);

  align-content: center;
  justify-content: center;

  position: fixed;
  bottom: 1rem;
  right: var(--responsive-padding);
  z-index: 99;
  margin-top: calc(-1 * (var(--scroll-btn-size) / 2));

  /* Hide it to start */
  display: none;
  opacity: 0;
  transition: display .3s allow-discrete, opacity .3s;

  &.show {
    display: block;
    opacity: 1;

    @starting-style {
      opacity: 0;
    }
  }

  svg {
    fill: var(--color-white);
    height: auto;
    width: calc(var(--scroll-btn-size) / 2);
  }

}

@media (min-width: 960px) {
  .btn--scroll-top {
    --scroll-btn-size: 3.5rem;
    right: 1rem;
  }
}

@media (min-width: 1300px) {
  .btn--scroll-top {
    --scroll-btn-size: 3.5rem;
    right: var(--page-margin) ;
  }
}