.vv-pagination {
  margin-block: var(--vv-pagination-margin, 2rem 0);
}

.vv-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--vv-pagination-justify, center);
  gap: var(--vv-pagination-gap, 0.375rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vv-pagination__item {
  margin: 0;
}

.vv-pagination__link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: var(--vv-pagination-size, 2.75rem);
  min-height: var(--vv-pagination-size, 2.75rem);
  padding: 0 var(--vv-pagination-padding-x, 0.75rem);
  border: var(--vv-pagination-border, 1px solid currentColor);
  border-radius: var(--vv-pagination-radius, 0.5rem);
  background: var(--vv-pagination-bg, transparent);
  color: var(--vv-pagination-color, inherit);
  font-family: var(--vv-pagination-font, inherit);
  font-size: var(--vv-pagination-font-size, 1rem);
  font-weight: var(--vv-pagination-weight, 500);
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vv-pagination__link:hover {
  background: var(--vv-pagination-hover-bg, rgba(0, 0, 0, 0.06));
  color: var(--vv-pagination-hover-color, var(--vv-pagination-color, inherit));
}

.vv-pagination__link:focus-visible {
  outline: var(--vv-pagination-focus-width, 2px) solid var(--vv-pagination-focus-color, currentColor);
  outline-offset: var(--vv-pagination-focus-offset, 2px);
}

.vv-pagination__link--current,
.vv-pagination__link--current:hover {
  border-color: var(--vv-pagination-current-border-color, var(--vv-pagination-current-bg, #111));
  background: var(--vv-pagination-current-bg, #111);
  color: var(--vv-pagination-current-color, #fff);
}

.vv-pagination__link--disabled,
.vv-pagination__link--disabled:hover {
  background: var(--vv-pagination-bg, transparent);
  opacity: var(--vv-pagination-disabled-opacity, 0.45);
  cursor: default;
}

.vv-pagination__gap {
  display: inline-flex;
  justify-content: center;
  min-width: 1.5rem;
  color: var(--vv-pagination-gap-color, inherit);
}

.vv-pagination__icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

@media (max-width: 30rem) {
  .vv-pagination__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vv-pagination__link {
    transition: none;
  }
}