.pagination {
  display: grid;
  align-items: stretch;
  justify-content: center;
  gap: .5rem;
  margin: 0 auto;
  padding: 5px;
  background-color: var(--c-bg);
  border-top: 1px solid var(--c-border);
}

.pagination__button--first { grid-area: first }
.pagination__button--prev { grid-area: prev }
.pagination__button--current { grid-area: current }
.pagination__button--next { grid-area: next }
.pagination__button--last { grid-area: last }


@media (-moz-touch-enabled: 0), (pointer: fine) {
  .pagination {
    position: sticky;
    z-index: 10;
    bottom: 0;
    left: 0;
    right: 0;
    
    &:before { /* decorative shadow over sticky element */
      content: '';
      position: absolute;
      bottom: 100%;
      width: 100%;
      height: 10px;
      background-image: linear-gradient(to top, var(--c-bg) 0%, transparent 100%);
    }
  }
}
@media (max-width: 568px) {
  .pagination {
    grid-template-areas: "first prev next last";
    grid-template-columns: repeat(4, 1fr);

    a[aria-current],
    small {
      display: none;
    }
  }
}
@media (min-width: 568px) {
  .pagination {
    width: 100%;
    grid-template-areas: "first prev current next last";
    grid-template-columns: repeat(5, 1fr);
  }
}

.to {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  min-width: 1.5em;
  font-size: 48px;
  border: 0;
  color: var(--c-text);
  background-image: linear-gradient(0deg, var(--c-bg) 0%, transparent 100%);
  opacity: .25;
  transition: opacity .2s ease-out;

  &:is(:hover, :focus) {
    opacity: .75;
    text-decoration: none;

    & .to__arrow {
      transform: translateY(0%);
    }
    
    & .to__text {
      opacity: 1;
    }
  }

  &:focus {
    outline: 0;
  }
}

.to__arrow {
  transition: transform .2s ease-out;
}

.to__text {
  text-align: center;
  font-size: .5em;
  opacity: .25;
  transition: opacity .2s ease-out;
}

.to.top .to__arrow {
  transform: translateY(10%);
}

.to.bottom .to__arrow {
  transform: translateY(-10%);
}