/**
 * The "what would you like to add?" chooser.
 *
 * The same tile the homepage uses to explore the directory, because it answers
 * the same shape of question — which kind of record is this? — and a
 * contributor who has already seen those tiles should recognise these.
 */

.gcn-chooser {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--gcn-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gcn-chooser__link {
	display: flex;
	flex-direction: column;
	gap: var(--gcn-space-2);
	height: 100%;
	padding: var(--gcn-space-6);
	color: inherit;
	text-decoration: none;
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-lg);
	transition:
		border-color var(--gcn-duration) var(--gcn-ease),
		box-shadow var(--gcn-duration) var(--gcn-ease),
		transform var(--gcn-duration) var(--gcn-ease);
}

.gcn-chooser__link:hover {
	color: inherit;
	border-color: var(--gcn-brand-border);
	box-shadow: var(--gcn-shadow-md);
	transform: translateY(-2px);
}

.gcn-chooser__icon {
	width: 1.7rem;
	height: 1.7rem;
	background-color: var(--gcn-brand);
	-webkit-mask: var(--gcn-detail-icon) center / contain no-repeat;
	mask: var(--gcn-detail-icon) center / contain no-repeat;
}

.gcn-chooser__text {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
}

.gcn-chooser__label {
	font-size: var(--gcn-text-lg);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: var(--gcn-tracking-tight);
	color: var(--gcn-text);
}

.gcn-chooser__link:hover .gcn-chooser__label {
	color: var(--gcn-brand-strong);
}

.gcn-chooser__blurb {
	font-size: var(--gcn-text-sm);
	line-height: var(--gcn-leading-normal);
	color: var(--gcn-text-muted);
}

.gcn-chooser__note,
.gcn-chooser__empty {
	margin-top: var(--gcn-space-6);
	font-size: var(--gcn-text-md);
	color: var(--gcn-text-muted);
}