ar-design/dist/assets/css/components/navigation/pagination/styles.css

AR Design is a (react | nextjs) ui library.

.ar-pagination {
  display: flex;
  flex-direction: row;

  align-items: center;
  gap: 0 0.5rem;

  > ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    gap: 0 0.5rem;
    height: 1.75rem;

    > li {
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 1.75rem;
      height: 100%;
      border-radius: var(--border-radius-pill);
      box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.1);
      transform: scale(1);
      color: var(--gray-700);
      font-weight: 400;
      cursor: pointer;
      user-select: none;

      &:hover {
        background-color: var(--gray-300);
      }

      &:is(.selection-page) {
        background-color: var(--primary);
        box-shadow: 0 0 0 3.5px rgba(var(--primary-rgb), 0.1);
        color: var(--white);
        font-size: 0.9rem;
        transform: scale(1.15);
        transition:
          transform 250ms,
          box-shadow 250ms 250ms ease-in-out;
      }

      &:is(.passive) {
        color: var(--gray-300);
        cursor: no-drop;

        &:hover {
          background-color: transparent;
        }
      }

      &:is(:nth-child(2)) {
        margin-right: 1rem;
      }

      &:is(:nth-last-child(2)) {
        margin-left: 1rem;
      }

      &:is(:nth-child(1), :nth-child(2), :nth-last-child(1), :nth-last-child(2)) {
        > span {
          position: relative;
          top: -2px;
          font-size: 1.5rem;
        }
      }

      &:is(.start-ellipsis, .end-ellipsis),
      &:is(.start-ellipsis, .end-ellipsis):hover {
        background-color: transparent;
        cursor: no-drop;
      }
    }
  }
}

/* --- [KÜÇÜK MOBİL - IPHONE SE VB.] --- */
/* Çok dar ekranlar için özel düzeltmeler */
@media (max-width: 375px) {
}

/* --- [MOBİL - STANDART] --- */
/* Ekran 576px ve altına düştüğünde çalışır */
@media (max-width: 576px) {
  .ar-pagination {
    > ul {
      > li {
        min-width: 1rem;
        height: 1rem;

        &:hover {
        }

        &:is(.selection-page) {
        }

        &:is(.passive) {
          &:hover {
          }
        }

        &:is(:nth-child(2)) {
          margin-right: 0.5rem;
        }

        &:is(:nth-last-child(2)) {
          margin-left: 0.5rem;
        }

        &:is(:nth-child(1), :nth-child(2), :nth-last-child(1), :nth-last-child(2)) {
          > span {
          }
        }

        &:is(.start-ellipsis, .end-ellipsis),
        &:is(.start-ellipsis, .end-ellipsis):hover {
        }
      }
    }
  }
}

/* --- [TABLET DİKEY & BÜYÜK TELEFONLAR] --- */
/* Ekran 768px ve altına düştüğünde çalışır */
@media (max-width: 768px) {
  .ar-pagination {
    > ul {
      > li {
        min-width: 1rem;
        height: 1rem;

        &:hover {
        }

        &:is(.selection-page) {
        }

        &:is(.passive) {
          &:hover {
          }
        }

        &:is(:nth-child(2)) {
          margin-right: 0.5rem;
        }

        &:is(:nth-last-child(2)) {
          margin-left: 0.5rem;
        }

        &:is(:nth-child(1), :nth-child(2), :nth-last-child(1), :nth-last-child(2)) {
          > span {
          }
        }

        &:is(.start-ellipsis, .end-ellipsis),
        &:is(.start-ellipsis, .end-ellipsis):hover {
        }
      }
    }
  }
}

/* --- [TABLET & KÜÇÜK LAPTOP] --- */
/* Ekran 1024px ve altına düştüğünde çalışır */
@media (max-width: 1024px) {
}