/* Pagination */
.mc-grid-pagination__nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.mc-grid-pagination__nav--skeleton {
  pointer-events: none;
}

.mc-grid-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  padding: 8px 14px;
  border: 0;
  background: var(--mc-color-surface);
  color: var(--mc-color-text);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  clip-path: polygon(
    8px 0,
    100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%,
    0 8px
  );
}

.mc-grid-page.is-active {
  color: var(--mc-color-surface);
  background: var(--mc-gradient-primary);
}

.mc-grid-page--skeleton {
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  background: transparent;
  cursor: default;
}

.mc-grid-pagination-skeleton {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  overflow: hidden;
  background: #e8edf0;
  clip-path: polygon(
    8px 0,
    100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%,
    0 8px
  );
}

.mc-grid-pagination-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  animation: mc-product-skeleton-shimmer 1.2s infinite;
}