/**
 * Area Links widget.
 */

.msd-alinks {
	--msd-alinks-accent: var(--msd-red, #9d2020);
}

.msd-alinks__list {
	--msd-alinks-min: 230px;

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--msd-alinks-min)), 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.msd-alinks .msd-alinks__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 100%;
	padding: 16px 18px;
	border: 1px solid var(--msd-line, #e6e0d5);
	border-radius: 14px;
	background-color: var(--msd-cream, #f7f4ee);
	color: var(--msd-ink, #1e2a30);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.msd-alinks .msd-alinks__link:hover {
	border-color: var(--msd-alinks-accent);
	background-color: var(--msd-white, #fff);
	color: var(--msd-alinks-accent);
}

.msd-alinks__name {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.msd-alinks__name .msd-icon {
	color: var(--msd-alinks-accent);
	font-size: 20px;
}

.msd-alinks__arrow {
	color: var(--msd-text-soft, #59636a);
	font-size: 20px;
}

.msd-alinks__link:hover .msd-alinks__arrow {
	color: var(--msd-alinks-accent);
}

@media (prefers-reduced-motion: reduce) {

	.msd-alinks .msd-alinks__link {
		transition: none;
	}
}