// Linkroll
//
// Style guide: Components.linkroll
.c-linkroll {
	margin-top: 1rem;
}


.c-linkroll__link {
	border-left: $border-thicker solid;
	@include var(border-color, linkroll-gray);
	padding: 1.25rem 1.75rem;
	text-decoration: none;
	transition:
		background-color $animation-duration-shorter $animation-easing-character,
		color $animation-duration-shorter $animation-easing-character;

	// States
	&:hover,
	&:focus {
		@include var(background-color, linkroll-gray-background);
	}

	// Supports
	@supports #{$supports-flex} {
		display: flex;
		flex-direction: column;
	}

	// User Queries
	@media screen and (prefers-reduced-motion: reduce) {
		transition: none;
	}

	&.announcements,
	&.experience,
	&.myth {
		@include var(border-color, category-pink);

		&:hover,
		&:focus {
			@include var(background-color, category-pink-background);
		}
	}

	&.assistive-technology,
	&.background {
		@include var(border-color, category-gray);

		&:hover,
		&:focus {
			@include var(background-color, category-gray-background);
		}
	}

	&.how-to {
		@include var(border-color, category-yellow);

		&:hover,
		&:focus {
			@include var(background-color, category-yellow-background);
		}
	}

	&.quick-test {
		@include var(border-color, category-blue);

		&:hover,
		&:focus {
			@include var(background-color, category-blue-background);
		}
	}

	&.quick-tip {
		@include var(border-color, category-green);

		&:hover,
		&:focus {
			@include var(background-color, category-green-background);
		}
	}
}


.c-linkroll__link--featured {
	border-top: $border-thicker solid transparent;
	border-left: none;
}


.c-linkroll__entry {
	@include preserve-list-semantics();
	@include var(background-color, card-background);
	margin-top: 1.25rem;
}


.c-linkroll__category {
	@include var(color, card-meta-text);
}


.c-linkroll__category--featured {
	padding-top: 1rem;
}


.c-linkroll__title {
	@include var(color, card-text);
	line-height: $line-height-tight;
	text-decoration: none;
}


.c-linkroll__featured {
	border-bottom: $border-thin dotted transparent;
	@include var(color, card-text);
	font-family: $font-family-secondary;
	padding-bottom: 0.75rem;
}
