@import './token.less';

.@{ns}-Pagination {
  display: inline-block;
  padding: 0;
  margin: 0;
  border-radius: 4px;

  &-wrap {
    display: flex;
    align-items: center;
    height: 30px;
  }

  > li {
    display: inline;

    > a,
    > span {
      user-select: none;
      cursor: pointer;
      position: relative;
      float: left;
      text-decoration: none;
      min-width: @Pagination-minWidth;
      height: @Pagination-height;
      border: 0;
      line-height: @Pagination-height;
      padding: @Pagination-padding;
      text-align: center;
      color: #666666;
      border-radius: 0;
      margin-left: 0;
      font-size: @Pagination-fontSize;
    }

    > a:hover,
    > span:hover,
    > a:focus,
    > span:focus {
      background: transparent;
      color: var(--primary-color);
    }
  }

  > li.is-disabled {
    > span,
    > a {
      cursor: not-allowed;
    }

    > a,
    > span,
    > a:hover,
    > span:hover,
    > a:focus,
    > span:focus {
      color: #cccccc;
    }
  }

  > li.is-active {
    > a,
    > span,
    > a:hover,
    > span:hover,
    > a:focus,
    > span:focus {
      background: @Pagination-onActive-backgroundColor;
      color: @Pagination-onActive-color;
      border: @Pagination-onActive-border;
      border-radius: @border-radius;
    }
  }

  &-prev {
    > span {
      cursor: pointer;
    }
  }

  &-ellipsis {
    > a > span {
      position: relative;
      top: -4px;
    }
  }

  &-next {
    > span {
      cursor: pointer;
    }
  }

  &-inputGroup {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;

    input {
      width: 50px;
      height: @Pagination-height;
      border: 1px solid var(--color-border);
      border-radius: @border-radius;
      padding: @gap-xs 10px;
      margin: 0 6px;
      text-align: center;

      &:focus,
      &:hover {
        outline: none;
        border: 1px solid var(--primary-color);
      }
    }
  }
}

.@{ns}PaginationWrapper-pager {
  &:first-child {
    margin-bottom: @gap-sm;
  }

  text-align: right;
}