/* Availability badge.
   Four tones, and the difference between them is a factual claim: green only when
   a provider said yes recently. Anything old is grey, whatever it said. */

.szav-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	border: 1px solid transparent;
}

.szav-badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

.szav-open {
	color: #16704A;
	background: #E6F4EC;
	border-color: #BFE3D0;
}

.szav-wait {
	color: #8A5600;
	background: #FDF1DC;
	border-color: #F0DAAE;
}

.szav-closed {
	color: #4A4F5E;
	background: #EEEEF3;
	border-color: #DCDCE5;
}

/* Stale and unknown share a look on purpose: "we do not currently know" is the
   honest reading of both, and a parent should not have to learn two greys. */
.szav-stale,
.szav-unknown {
	color: #5B6172;
	background: transparent;
	border-color: #D9D5EE;
	font-weight: 500;
}

.szav-badge.szav-stale::before,
.szav-badge.szav-unknown::before {
	background: transparent;
	border: 1px solid currentColor;
}

/* On a provider page the badge carries a whole sentence, so let it wrap. */
.szav-single .szav-badge,
.szav-badge--single {
	white-space: normal;
	font-size: 14px;
	padding: 7px 14px;
}