source/style/pagination.scss
@import './variables';

/* Pagination */

#page-nav {
  position: relative;
  width: 100%;
  max-width: $article-width;
  margin: 20px auto 0 auto;
  transition: all 0.4s;
  transform: translate3d(0px, -20px, 0px);
  opacity: 0;
  text-align: center;

  &.show {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
  }
  span,
  a {
    display: inline-block;
    padding: 0 10px;
    margin: 5px 0;
    height: 30px;
    min-width: 30px;
    line-height: 30px;
    font-size: 14px;
    text-transform: uppercase;
    vertical-align: middle;
    text-align: center;
    transition: all 0.24s;
    border-bottom: 1px solid transparent;
  }
  span {
    &.current {
      background-color: darken($background-color, 5%);
      border-bottom: 1px solid darken($background-color, 20%);
      color: $black;

      @media (prefers-color-scheme: dark) {
        background-color: darken($dark-mode-post-background, 5%);
        border-color: $dark-mode-post-background;
        color: lighten($dark-mode-post-background, 40%);
      }
    }
    &.space {
      background-color: $white;
      color: $black;

      @media (prefers-color-scheme: dark) {
        background-color: $dark-mode-post-background;
        border-color: lighten($dark-mode-post-background, 5%);
        color: lighten($dark-mode-post-background, 40%);
      }
    }
  }
  a {
    background-color: $white;
    color: $black;

    @media (prefers-color-scheme: dark) {
      background-color: $dark-mode-post-background;
      border-color: lighten($dark-mode-post-background, 5%);
      color: lighten($dark-mode-post-background, 40%);
    }
    &:hover {
      background: darken($background-color, 3%);
      color: $black;

      @media (prefers-color-scheme: dark) {
        background-color: lighten($dark-mode-post-background, 5%);
        color: $accent-color;
      }
    }
  }
}
