/* Paginator Component Styles */
.paginator-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin: var(--space-2) 0;

	.paginator {
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}

	.previous-button,
	.next-button,
	.page-button {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--space-2);
		min-width: 40px;
		min-height: 40px;
		background-color: var(--color-white);
		color: var(--color-body-text);
		font-size: var(--font-size-body);
		font-weight: var(--font-weight-bold);
		border: var(--border-width) solid var(--color-input-border);
		border-radius: var(--border-radius);
		cursor: pointer;
		transition: all var(--transition-fast);
	}

	.previous-button:hover:not(:disabled),
	.next-button:hover:not(:disabled) {
		background-color: var(--color-input-border);
		color: var(--color-white);
	}

	.page-button.selected {
		background-color: var(--color-input-border);
		color: var(--color-white);
	}

	.page-button:not(.selected):hover {
		background-color: var(--color-input-border);
		color: var(--color-white);
	}

	.previous-button:disabled,
	.next-button:disabled,
	.page-button:disabled {
		cursor: not-allowed;
		opacity: 0.5;
	}

	.button-content {
		display: flex;
		align-items: center;
		gap: var(--space-1);
	}

	.button-content svg {
		width: 16px;
		height: 16px;
	}
}