.mmpm {
	--mmpm-font-size: 15px;
	--mmpm-font-weight: 600;
	--mmpm-pill-bg: #1f5fa9;
	--mmpm-pill-color: #ffffff;
	--mmpm-pill-hover-bg: #15487f;
	--mmpm-pill-hover-color: #ffffff;
	--mmpm-pill-active-bg: #0f3763;
	--mmpm-pill-active-color: #ffffff;
	--mmpm-gap: 10px;
	--mmpm-padding-y: 10px;
	--mmpm-padding-x: 20px;
	--mmpm-radius: 999px;
	width: 100%;
	max-width: 100%;
}

.mmpm__label {
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #5f6b7a;
}

.mmpm__track {
	display: flex;
	gap: var(--mmpm-gap);
	overflow-x: auto;
	overflow-y: hidden;
	padding: 2px 0 10px;
	-ms-overflow-style: none;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.mmpm__track::-webkit-scrollbar {
	display: none;
}

.mmpm__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	white-space: nowrap;
	padding: var(--mmpm-padding-y) var(--mmpm-padding-x);
	border-radius: var(--mmpm-radius);
	background: var(--mmpm-pill-bg);
	color: var(--mmpm-pill-color);
	font-size: var(--mmpm-font-size);
	font-weight: var(--mmpm-font-weight);
	line-height: 1;
	text-decoration: none;
	scroll-snap-align: start;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.mmpm__pill:hover,
.mmpm__pill:focus-visible {
	background: var(--mmpm-pill-hover-bg);
	color: var(--mmpm-pill-hover-color);
	transform: translateY(-1px);
	outline: none;
}

.mmpm__pill.is-active {
	background: var(--mmpm-pill-active-bg);
	color: var(--mmpm-pill-active-color);
}

.mmpm-empty {
	font-size: 14px;
	color: #8a94a3;
}

@media (min-width: 768px) {
	.mmpm--mobile .mmpm__track {
		padding-bottom: 8px;
	}
	}