hugo-theme-zzo/assets/sass/components/_pagination.scss

.pagination {
  border-radius: 0.25rem;
  margin: 2rem 1rem;
  padding: 0.5rem 0;

  @include flexbox();
  @include align-items(center);
  @include justify-content(center);
  @include themify($themes) {
    background-color: themed('pagination-background-color');
  }

  li {
    border-radius: 0.25rem;
    &.disabled {
      a {
        @include on-event {
          @include themify($themes) {
            color: themed('pagination-number-color');
            text-decoration: none;
          }      
        }
      }
    }
    
    &.active {
      a {
        @include themify($themes) {
          color: themed('link-hover');
        }      
      }
    }
  }

  a {
    font-size: 1.25rem;
    padding: 0.5rem 0.75rem;    
    @include themify($themes) {
      color: themed('pagination-number-color');
      @include on-event {
        color: themed('link-hover');
      }
    }
  }

  .active {
    @include themify($themes) {
      background-color: themed('pagination-background-color');
    }
  }
}

.pagination-single {
  @include flexbox();
  @include align-items(center);
  @include justify-content(center);
  @include flex-wrap(wrap);
  width: 100%;
  margin: 1rem 0;

  &__left,
  &__right {
    @include truncate($grid_max_width + $grid_max_unit);
    @include flexbox();
    @include align-items(center);
    @include justify-content(center);
    @include transition(all, 0.2s, ease-out);
    
    padding: 0.25rem;
    border-radius: 0.125rem;
    &-title {
      font-size: 16.8px;
      padding-bottom: 0.3rem;
      @include truncate($grid_max_width + $grid_max_unit);
    }

    @include on-event {
      .pagination-single__icon {
        @include themify($themes) {
          color: themed('gtt-hover-color');
          background-color: themed('gtt-hover-background-color');
        }
      }
    }
  }

  &__left {
    @include on-event {
      @include translateX(-0.25rem);
    }    
  }

  &__right {
    @include on-event {
      @include translateX(0.25rem);
    }    
  }

  &__icon {
    width: 28px;
    height: 28px;
    border-radius: 100%;
    margin: 0 0.5rem;

    @include flexbox();
    @include align-items(center);
    @include justify-content(center);
    @include themify($themes) {
      color: themed('gtt-color');
      background-color: themed('gtt-background-color');
    }
  }
}

.pagination-list {
  border-radius: 0.25rem;
  margin: 2rem 1rem;
  padding: 0.5rem 0;

  @include flexbox();
  @include align-items(center);
  @include justify-content(space-around);
  @include themify($themes) {
    background-color: themed('pagination-background-color');
  }  

  &__item {
    font-size: 0.95rem; 
    text-decoration: none !important;

    @include flexbox();
    @include align-items(center);  

    &--number {
      @include themify($themes) {
        color: themed('pagination-number-color');
      }
    }

    .enable {
      padding: 0 0.125rem;
      @include themify($themes) {
        color: themed('pagination-link-color');
      }
      @include on-event {
        cursor: pointer;
        border-radius: 0.1rem;
        text-decoration: underline;
        @include themify($themes) {        
          color: themed('link-hover');
        }
      }
    }

    .disabled {
      cursor: default;
      @include themify($themes) {
        color: themed('pagination-disabled-color');        
      }            
    }
  }

  .icon {
    @include flexbox();
    @include align-items(stretch);
    @include justify-content(center);    
  }
}