.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');
    }
  }
}