/**
 * Attendee list: the controls `grid gap-3
 * md:grid-cols-[minmax(0,1fr)_14rem_auto] md:items-center`, the status
 * `mt-4 flex flex-wrap justify-between gap-3 text-sm` muted with the clear
 * button in the dark red, the list `mt-6 grid gap-x-8 border-t
 * sm:grid-cols-2 lg:grid-cols-3`, an organization `flex items-baseline
 * justify-between gap-3 border-b py-2 text-sm`, its country `text-xs`
 * muted, the member flag a 16px award `ml-1.5` in the dark red. The note
 * when nothing matches `mt-8 rounded-lg border border-dashed
 * bg-surface-cool p-6 text-sm`, "Show more" `mt-6 flex gap-4`.
 */

.sba-c-attendee-list .sba-c-attendees-controls {
	display: grid;
	gap: 12px;
}

.sba-c-attendee-list .sba-c-attendees-controls[hidden] {
	display: none;
}

.sba-c-attendee-list .sba-c-attendees-controls + .sba-c-attendees-status {
	margin-top: 16px;
}

.sba-c-attendee-list .sba-c-attendees-members {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--sba-slate);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	cursor: pointer;
}

.sba-c-attendee-list .sba-c-attendees-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-c-attendee-list .sba-c-attendees-status p {
	margin: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.sba-c-attendee-list .sba-c-attendees-status strong {
	color: var(--sba-charcoal);
	font-weight: 500;
}

.sba-c-attendee-list .sba-c-attendees-status .sba-i {
	color: var(--sba-red-dark);
	font-size: 16px;
	line-height: 1;
	vertical-align: -0.15em;
}

.sba-c-attendee-list .sba-c-attendees-clear.sba-c-attendees-clear {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sba-red-dark);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	cursor: pointer;
}

.sba-c-attendee-list .sba-c-attendees-clear.sba-c-attendees-clear:hover {
	color: var(--sba-red-darker);
}

.sba-c-attendee-list .sba-c-attendees-clear[hidden] {
	display: none;
}

.sba-c-attendee-list .sba-c-attendees-clear .sba-i {
	font-size: 16px;
	vertical-align: 0;
}

.sba-c-attendee-list .sba-c-attendees-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 32px;
	margin: 24px 0 0;
	padding: 0;
	border-top: 1px solid var(--sba-border);
	list-style: none;
}

.sba-c-attendee-list .sba-c-attendees-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px solid var(--sba-border);
	font-size: 14px;
	line-height: 20px;
}

.sba-c-attendee-list .sba-c-attendees-list li[hidden] {
	display: none;
}

.sba-c-attendee-list .sba-c-attendee-name {
	min-width: 0;
	color: var(--sba-charcoal);
}

.sba-c-attendee-list .sba-c-attendee-member {
	display: inline-flex;
	margin-left: 6px;
	color: var(--sba-red-dark);
	vertical-align: -0.15em;
}

.sba-c-attendee-list .sba-c-attendee-member .sba-i {
	font-size: 16px;
	line-height: 16px;
}

.sba-c-attendee-list .sba-c-attendee-country {
	flex: 0 0 auto;
	color: var(--sba-slate);
	font-size: 12px;
	line-height: 16px;
}

.sba-c-attendee-list .sba-c-attendees > .sba-c-attendees-none {
	margin: 32px 0 0;
	padding: 24px;
	border: 1px dashed var(--sba-border);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface-cool);
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-c-attendee-list .sba-c-attendees > .sba-c-attendees-none[hidden],
.sba-c-attendee-list .sba-c-attendees-more[hidden] {
	display: none;
}

.sba-c-attendee-list .sba-c-attendees-more {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

@media (min-width: 640px) {
	.sba-c-attendee-list .sba-c-attendees-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.sba-c-attendee-list .sba-c-attendees-controls {
		grid-template-columns: minmax(0, 1fr) 14rem auto;
		align-items: center;
	}
}

@media (min-width: 1024px) {
	.sba-c-attendee-list .sba-c-attendees-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.sba-c-attendee-list .sba-c-attendees-list[hidden] {
	display: none;
}