/* Glowence Chip List */

.glowence-chips {
	--glw-chips-justify: flex-start;
	--glw-chips-text-align: left;
	--glw-chips-col-gap: 0.625rem;
	--glw-chips-row-gap: 0.75rem;
	--glw-chips-caption-gap: 1rem;
	--glw-chips-caption-color: var(--e-global-color-glw_white, #fff);
	--glw-chips-radius: 999px;
	--glw-chips-icon-size: 1.65rem;
	--glw-chips-icon-color: var(--e-global-color-secondary, #d2831a);
	--glw-chips-dot: var(--e-global-color-primary, #af6200);

	/* Outlined pills: the default design. */
	--glw-chips-color: var(--e-global-color-glw_warm_white, #fffcfb);
	--glw-chips-bg: color-mix(in srgb, var(--e-global-color-accent, #0f0b08) 28%, transparent);
	--glw-chips-border: color-mix(in srgb, var(--e-global-color-glw_warm_white, #fffcfb) 32%, transparent);
	--glw-chips-hover-color: var(--glw-chips-color);
	--glw-chips-hover-bg: color-mix(in srgb, var(--e-global-color-glw_warm_white, #fffcfb) 14%, transparent);
	--glw-chips-hover-border: color-mix(in srgb, var(--e-global-color-glw_warm_white, #fffcfb) 72%, transparent);
}

.glowence-chips.is-design-card {
	--glw-chips-col-gap: 0.75rem;
	--glw-chips-radius: 0.75rem;
	--glw-chips-color: var(--e-global-color-accent, #0f0b08);
	--glw-chips-bg: var(--e-global-color-glw_warm_white, #fffcfb);
	--glw-chips-border: transparent;
	--glw-chips-hover-bg: var(--glw-chips-bg);
	--glw-chips-hover-border: var(--e-global-color-primary, #af6200);
	--glw-chips-caption-color: var(--e-global-color-text, #6f6c6a);
}

.glowence-chips.is-design-inline {
	--glw-chips-col-gap: 0.75rem;
	--glw-chips-row-gap: 0.5rem;
}

.glowence-chips__caption {
	margin-bottom: var(--glw-chips-caption-gap);
	color: var(--glw-chips-caption-color);
	font-family: var(--e-global-typography-glw_caption-font-family, "Inter"), sans-serif;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.16em;
	text-align: var(--glw-chips-text-align);
	text-transform: uppercase;
}

.glowence-chips__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--glw-chips-justify);
	gap: var(--glw-chips-row-gap) var(--glw-chips-col-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.glowence-chips__item {
	display: flex;
	align-items: center;
	gap: var(--glw-chips-col-gap);
	margin: 0;
	padding: 0;
}

.glowence-chips__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--glw-chips-color);
	text-decoration: none;
	transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

.glowence-chips__text {
	font-family: var(--e-global-typography-glw_body_sm-font-family, "Inter"), sans-serif;
	font-size: var(--e-global-typography-glw_body_sm-font-size, 0.875rem);
	font-weight: 400;
	line-height: 1.3;
}

.glowence-chips__icon {
	display: inline-flex;
	flex: none;
	width: var(--glw-chips-icon-size);
	height: var(--glw-chips-icon-size);
	color: var(--glw-chips-icon-color);
	font-size: var(--glw-chips-icon-size);
}

/* Icons are drawn with currentColor strokes and fills, so only the colour is set here. */
.glowence-chips__icon svg {
	width: 100%;
	height: 100%;
}

:where(.glowence-chips.is-design-pill) .glowence-chips__chip,
:where(.glowence-chips.is-design-card) .glowence-chips__chip {
	border: 1px solid var(--glw-chips-border);
	border-radius: var(--glw-chips-radius);
	background-color: var(--glw-chips-bg);
}

:where(.glowence-chips.is-design-pill) .glowence-chips__chip {
	padding: 0.5rem 1rem;
}

:where(.glowence-chips.is-design-card) .glowence-chips__chip {
	min-width: 8.5rem;
	padding: 0.5rem 0.75rem;
}

:where(.glowence-chips.is-design-card) .glowence-chips__text {
	font-family: var(--e-global-typography-glw_caption-font-family, "Inter"), sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
}

:where(.glowence-chips.is-design-inline) .glowence-chips__text {
	line-height: 1.4;
}

.glowence-chips__dot {
	flex: none;
	width: 0.25rem;
	height: 0.25rem;
	border-radius: 999px;
	background-color: var(--glw-chips-dot);
}

a.glowence-chips__chip:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #af6200);
	outline-offset: 2px;
}

@media (hover: hover) {
	.glowence-chips.is-design-pill .glowence-chips__chip:hover,
	.glowence-chips.is-design-card .glowence-chips__chip:hover {
		border-color: var(--glw-chips-hover-border);
		background-color: var(--glw-chips-hover-bg);
		color: var(--glw-chips-hover-color);
	}

	.glowence-chips.is-design-inline a.glowence-chips__chip:hover {
		color: var(--glw-chips-hover-color);
	}

	.glowence-chips.has-lift .glowence-chips__chip:hover {
		transform: translateY(-3px);
	}
}

@media (max-width: 479px) {
	.glowence-chips.is-design-card {
		--glw-chips-icon-size: 1.3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.glowence-chips__chip {
		transition: none;
	}

	.glowence-chips.has-lift .glowence-chips__chip:hover {
		transform: none;
	}
}