/* Shared pagination */
.user-listing-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 22px;
}

.user-listing-pagination__button {
  display: inline-flex;
  min-width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--tg-color-border-muted);
  border-radius: 8px;
  background: var(--tg-color-white-default);
  color: var(--tg-theme-secondary);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.user-listing-pagination__button:hover,
.user-listing-pagination__button:focus-visible,
.user-listing-pagination__button.is-active {
  border-color: var(--tg-theme-primary);
  background: var(--tg-theme-primary);
  color: var(--tg-color-white-default);
}

.user-listing-pagination__button--text {
  min-width: auto;
  padding-right: 13px;
  padding-left: 13px;
}

.user-listing-pagination__icon {
  display: none;
}

.user-listing-pagination__button:disabled,
.user-listing-pagination__button.disabled,
.user-listing-pagination__button[aria-disabled="true"] {
  border-color: var(--tg-color-border-muted);
  background: var(--tg-color-surface-soft);
  color: var(--tg-color-gray-1);
  cursor: not-allowed;
  opacity: .72;
  pointer-events: none;
}

.user-listing-pagination__button:disabled:hover,
.user-listing-pagination__button.disabled:hover,
.user-listing-pagination__button[aria-disabled="true"]:hover {
  border-color: var(--tg-color-border-muted);
  background: var(--tg-color-surface-soft);
  color: var(--tg-color-gray-1);
}

@media (max-width: 575.98px) {
  .user-listing-pagination {
    gap: 1px;
  }

  .user-listing-pagination__button {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
  }

  .user-listing-pagination__button--text {
    min-width: 34px;
    padding-right: 9px;
    padding-left: 9px;
  }

  .user-listing-pagination__button--text .user-listing-pagination__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .user-listing-pagination__button--text .user-listing-pagination__icon {
    display: inline-flex;
  }
}