@use "../mixins/utilities";
@use "../variables-site/structure";

// Index/archive navigation
.pagination {
	margin: #{3 * structure.$size__spacing-unit} 0;

	.nav-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		> * {
			background-color: #eee;
			margin-right: #{0.5 * structure.$size__spacing-unit};
			/* stylelint-disable-next-line */
			padding: #{0.5 * structure.$size__spacing-unit} #{0.75 * structure.$size__spacing-unit} #{0.25 *
				structure.$size__spacing-unit};

			&:last-child {
				margin-right: 0;
			}

			&.dots,
			&.next,
			&.prev {
				background-color: transparent;
			}

			&.dots,
			&.prev {
				padding-left: 0;
			}

			&.dots,
			&.next {
				padding-right: 0;
			}

			&.current {
				background-color: var(--newspack-theme-color-text-light);
				color: #fff;
			}
		}

		a:focus {
			text-decoration: underline;
			outline-offset: -1px;

			&.prev,
			&.next {
				text-decoration: none;

				.nav-prev-text,
				.nav-next-text {
					text-decoration: underline;
				}
			}
		}

		.nav-next-text,
		.nav-prev-text {
			display: none;
		}

		@include utilities.media(tablet) {
			margin-left: 0 auto;
			padding: 0;
		}
	}
}

// Query block navigation
.wp-block-query-pagination {
	margin: #{3 * structure.$size__spacing-unit} 0;

	&,
	.wp-block-query-pagination-numbers {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	span,
	a {
		margin-right: #{0.25 * structure.$size__spacing-unit};
		padding: #{0.5 * structure.$size__spacing-unit} #{0.75 * structure.$size__spacing-unit};
		text-decoration: none;

		&:last-child {
			margin-right: 0;
		}
	}

	.page-numbers {
		background-color: #eee;
	}

	.dots {
		background: transparent;
		padding-left: 0;
		padding-right: 0;
	}

	.current {
		background-color: var(--newspack-theme-color-text-light);
		color: #fff;
	}
}

.entry-content .wp-block-query-pagination a {
	text-decoration: none;
}

// Comments navigation
.comment-navigation {
	.nav-links {
		display: flex;
		flex-direction: row;
	}

	.nav-previous,
	.nav-next {
		min-width: 50%;
		width: 100%;
		font-family: var(--newspack-theme-font-heading);
		font-weight: bold;
		padding: #{0.5 * structure.$size__spacing-unit} 0;

		.secondary-text {
			display: none;

			@include utilities.media(tablet) {
				display: inline;
			}
		}

		svg {
			vertical-align: middle;
			position: relative;
			margin: 0 -0.35em;
			top: -1px;
		}
	}

	.nav-next {
		text-align: right;
	}
}
