.gl-pagination {
  @include gl-font-base;

  a {
    @include gl-text-gray-900;
  }

  .page-link {
    @include gl-border-gray-200;
    @include gl-line-height-normal;
    @include gl-px-4;
    @include gl-py-3;
    @include gl-text-decoration-none;

    &.prev-page-item,
    &.next-page-item {
      @include gl-px-3;
    }

    &:not(.active):hover {
      @include gl-text-gray-900;
      @include gl-tmp-button-hover($gray-400, $gray-50);
      @include gl-z-index-0;
    }

    &:not(.active):focus {
      @include gl-focus($gl-border-size-2, $gray-400);
      @include gl-bg-gray-50;
    }

    &:not(.active):active,
    &:not(.active).active {
      @include gl-focus($gl-border-size-2, $gray-600);
      @include gl-bg-gray-100;

      &:focus {
        @include gl-focus($gl-border-size-2, $gray-600);
      }
    }
  }

  .page-item {
    &:not(.disabled) a.active {
      @include gl-bg-blue-500;
      @include gl-border-blue-600;
      @include gl-text-white;
      @include gl-z-index-2;
    }

    &.disabled .page-link {
      @include gl-bg-gray-10;
      @include gl-border-gray-200;
      @include gl-text-gray-400;
    }
  }

  .prev-page-item,
  .next-page-item {
    .gl-icon {
      vertical-align: bottom;
    }
  }
}

@include gl-media-breakpoint-down(sm) {
  .gl-pagination {
    .prev-page-item,
    .next-page-item {
      span {
        display: none;
      }
    }
  }
}