Block Links: With Date List

.blockLinks {
	--background: #{$primary};
	--color: #{choose-contrast-color-prefer-white($primary)};

	margin: 0 0 $spacing-sm;
	padding: 0;
	list-style: none;

	li {
		margin: 0;
	}

	a {
		color: var(--color, white);
	}

	&__dateList {
		margin: 0;
		list-style: none;
		padding: 0;
		border-bottom: 1px inset rgba(white, 0.25);
		@include line-height('compact');
		background: var(--background, #{$primary});
		color: var(--color, white);

		> li {
			&:nth-child(odd) {
				background: rgba(white, 0.1);
			}
		}
	}
}

.blockLink {
	--background: var(--background, #{$primary});
	--color: var(--background, #{choose-contrast-color-prefer-white($primary)});

	display: block;
	position: relative;
	text-decoration: none;
	@include line-height('compact');
	padding: $spacing-xs $spacing-sm;
	background: var(--background, #{$primary});
	color: var(--color, white);
	border-bottom: 1px inset rgba(white, 0.25);

	&__title {
		@include typescale('lg');
		font-weight: bold;
	}

	&__desc {
		margin-top: $spacing-3xs;
		@include typescale('sm');
	}

	&__date {
		color: $secondary;
		font-weight: bold;
		text-transform: uppercase;
		@include typescale('sm');

		&::after {
			content: ' - ';
			color: white;
		}
	}

	&::before {
		content: '';
		display: block;
		float: right;
		width: 1.5em;
		height: 1em;
		margin: 0.2em 0 0.2em 1em;
		background: center center / contain no-repeat url('#{$assets-directory}/img/rarr-secondary.svg');
		transition: transform 150ms ease-in-out;
	}

	@include clearfix;

	// States

	&:hover, &:focus {
		color: var(--color, white);

		.blockLink__title {
			text-decoration: underline;
		}

		&::before {
			transform: translateX(0.2em);
		}
	}
}

.blockLinks__dateListLink {
	display: block;
	padding: $spacing-xs $spacing-sm;
	text-decoration: none;

	&:hover, &:focus {
		.blockLink__desc {
			text-decoration: underline;
		}
	}
}

// Variants

.blockLink--tertiary,
.blockLinks--tertiary,
.blockLinks--tertiary .blockLink {
	--background: #{$tertiary};
	--color: #{choose-contrast-color-prefer-white($tertiary)};
}

.blockLink--navy,
.blockLinks--navy,
.blockLinks--navy .blockLink {
	--background: #{$navy};
	--color: #{choose-contrast-color-prefer-white($navy)};
}


// Layout Utility

.blockLinksGrid {
	display: flex;
	flex-wrap: wrap;
	column-gap: $grid-gutter-small;

	> .blockLinks {
		flex: 1 1 14em;
	}
}