section.archive-posts {
	background: var( --cyber-special-bg-color );
	gap: 4em;
	padding-block: 4em;
	font-size: var( --cyber-font-size );

	& .pagination {
		display: flex;
		justify-content: center;
		margin: 0 !important;
		font-size: .9em;
		gap: 1em;
		font-weight: bold;

		& > :not( .pagination-dots ) {
			aspect-ratio: 1 !important;
			width: 3em !important;
			border-radius: var( --cyber-border-radius ) !important;
			display: grid !important;
			border: 1px solid var( --cyber-border-color ) !important;
			place-content: center;
			margin: 0 !important;

			&.current {
				background: var( --cyber-gradient );
				border: none !important;
			}

			&:not( .current ):is( :hover, :focus-visible ) {
				border-color: var( --link_color ) !important;
			}

			&[rel] {
				& .page-text {
					display: none;
				}

				&::before,
				&::after {
					position: static;
					transform: none;
					font-size: 1.65em;
					line-height: 1;
				}
			}
		}
	}
}

.archive-filter {
	border-bottom: var( --cyber-border );
	display: flex;
	font-weight: bold;
	font-size: max( 0.75rem, calc( var( --cyber-font-size ) * 0.95 ) );
	--_pb: .5em;
	--_pi: .75em;

	& .filter-title {
		font-weight: bold;
		color: var(--link_color);
		padding: var( --_pb ) var( --_pi );
	}

	& .filter-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		text-transform: uppercase;

		& .filter-link {
			display: grid;
			color: inherit;
			padding: var( --_pb ) var( --_pi );
			position: relative;

			&[aria-current="page"]::after {
				content: "";
				width: calc( 100% - 2 * var( --_pi ) );
				height: .4em;
				background: var( --cyber-gradient );
				display: block;
				position: absolute;
				bottom: var( --_pb );
				justify-self: center;
			}
		}
	}
}