/**
 * @layer components — paginación numerada (paginate_links()). Se usa en el
 * archive de marcas y en el de publicaciones.
 *
 * `color`/`text-decoration` con !important: ver la nota en buttons.css.
 */

@layer components {
	.paginacion {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		margin-top: var(--space-8);
	}

	.paginacion .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		height: 40px;
		padding-inline: var(--space-2);
		font-size: var(--text-sm);
		color: var(--c-ink-700) !important;
		text-decoration: none !important;
		border: 1px solid var(--c-ink-200);
	}

	.paginacion .page-numbers.current {
		background: var(--c-accent-600);
		border-color: var(--c-accent-600);
		color: var(--c-white) !important;
	}

	.paginacion .page-numbers:not(.current):not(.dots):hover {
		border-color: var(--c-accent-600);
		color: var(--c-accent-600) !important;
	}

	.paginacion .dots {
		border: 0;
	}

	.paginacion__flecha {
		width: 18px;
		height: 18px;
	}

	.paginacion__flecha--prev {
		transform: rotate(180deg);
	}
}