/**
 * COA Centers - State Browser
 *
 * Styles for the [coa_state_browser] shortcode: responsive state pills linking
 * only to published state landing pages that contain live public schools.
 */

.coaStateBrowser {
	--coa-state-browser-ink: #24364b;
	--coa-state-browser-pill: #dff3fb;
	--coa-state-browser-pill-hover: #ccecf8;
	--coa-state-browser-active: #e00083;
	--coa-state-browser-active-hover: #c80075;
	--coa-state-browser-focus: rgba(224, 0, 131, 0.22);

	box-sizing: border-box;
	font-family: inherit;
	padding-block-end: 50px;
}

.coaStateBrowser *,
.coaStateBrowser *::before,
.coaStateBrowser *::after {
	box-sizing: border-box;
}

.coaStateBrowser__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.coaStateBrowser__item {
	margin: 0;
	padding: 0;
}

.coaStateBrowser__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 12px 24px;
	border-radius: 999px;
	background: var(--coa-state-browser-pill);
	color: #244762;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.coaStateBrowser__link:hover,
.coaStateBrowser__link:focus-visible {
	color: #244762;
	text-decoration: none;
}

.coaStateBrowser__link:hover {
	background: var(--coa-state-browser-pill-hover);
	transform: translateY(-1px);
}

.coaStateBrowser__link:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 5px var(--coa-state-browser-focus);
}

.coaStateBrowser__link[aria-current="page"],
.coaStateBrowser__link--active {
	background: var(--coa-state-browser-active);
	color: #ffffff;
	box-shadow: 0 10px 24px rgba(224, 0, 131, 0.22);
}

.coaStateBrowser__link[aria-current="page"]:hover,
.coaStateBrowser__link--active:hover,
.coaStateBrowser__link[aria-current="page"]:focus-visible,
.coaStateBrowser__link--active:focus-visible {
	background: var(--coa-state-browser-active-hover);
	color: #ffffff;
	text-decoration: none;
}

@media (max-width: 720px) {
	.coaStateBrowser__list {
		gap: 10px;
	}

	.coaStateBrowser__link {
		min-height: 42px;
		padding: 11px 18px;
		font-size: 15px;
	}
}

@media (max-width: 420px) {
	.coaStateBrowser__list {
		justify-content: flex-start;
	}

	.coaStateBrowser__item {
		flex: 1 1 calc(50% - 10px);
	}

	.coaStateBrowser__link {
		width: 100%;
		padding-inline: 12px;
	}
}