/* ../../../ui/react/base/src/data/Pagination.css */
.ui-pagination {
  display: grid;
  gap: .75rem;

  & > .footer {
    display: grid;
    grid-template-columns: auto 2fr auto;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;

    & > .summary {
      color: inherit;
      font-size: .875rem;
    }

    & > .size {
      display: inline-flex;
      white-space: nowrap;
      justify-self: start;
      align-items: baseline;
      gap: .5rem;

      & > .select {
        min-width: 4.5rem;
      }
    }

    & > .pages {
      display: flex;
      grid-column: 2;
      flex-wrap: wrap;
      justify-content: center;
      align-items:  center;
      gap: .375rem;

      & .link {
        display: inline-flex;
        color: inherit;
        text-decoration: none;
        border: 1px solid;
        border-radius: .5rem;
        justify-content: center;
        align-items:  center;
        min-width: 2.25rem;
        padding: .5rem .75rem;
        line-height: 1;

        &.current {
          text-decoration: none;
          background: none;
          border-color: #0000;
        }

        &[aria-current="page"] {
          font-weight: 700;
        }

        &[aria-disabled="true"] {
          opacity: .45;
          pointer-events: none;
        }
      }

      & .ellipsis {
        padding: .5rem .25rem;
      }
    }
  }
}