polestar-ui-kit/styles/components/pagination/index.less

## Install

/**
 * Polestar CSS
 */
 @import '../../themes/default/index';
 @import '../../mixins/index';

@btn-prefix-cls: ~'@{ant-prefix}-btn';

  .@{ps-pagination-prefix-cls} {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: @font-size-sm;
  
      // Pagination Button styles
      // -----------------------------
      .@{btn-prefix-cls} {
          height: 20px;
          margin-left: 3px;
          padding: 5px 7px;
          transition: none;
          font-size: @font-size-sm;
          border: none;
          border-radius: @border-radius-sm;
          line-height: 10px;
          box-shadow: unset;
          &:hover {
              background: @primary-1;
              color: @primary-color;
          }
          &-primary {
              background: @primary-2;
              color: @primary-color;
              &:hover {
                  background: @primary-2;
              }
          }
      }
      i {
          font-size: @font-size-base !important;
      }
      &-prev-btn,
      &-next-btn {
          color: @primary-4;
          &:hover {
              background: transparent !important;
              color: @primary-5;
          }
          &.@{btn-prefix-cls} {
              &-clicked {
                  &:after {
                      animation: unset;
                  }
              }
          }
      }
      &-next-btn {
          border-right: @border-width-base @border-style-base @border-color-split !important;
          border-radius: unset !important;
      }
      &-pageSize-selector {
          white-space: nowrap;
          display: flex;
          &-wrap {
              display: flex;
              align-items: center;
              margin-left: 10px;
          }
          &-btn {
              height: 20px;
              padding: 5px 10px;
              background: transparent;
              border: none;
              border-radius: @border-radius-sm;
              padding-left: 5px !important;
              padding-right: 5px !important;
              outline: none;
              cursor: pointer;
              transition: background-color 0.3s;
              line-height: 10px;
              &:hover {
                  background: @primary-3;
                  color: @primary-color;
              }
              &:focus {
                  background: @primary-2;
                  color: @primary-6;
                  font-weight: normal !important;
              }
          }
      }
      &-page-count-info {
          padding: 0 0 0 10px;
          color: @primary-color
      }
      &-pageSize-selector-wrap {
          border-left: @border-width-base @border-style-base @border-color-split;
          padding: 0 0 0 10px;
      }
  }