/**
 * Icon circle: template-parts/ui/icon-circle.php. A Phosphor icon on a
 * coloured circle (FAQ 2171:679 / 2171:755, Shipping & Returns 2174:796 /
 * 2176:715, Payment methods 2179:1181, About 2169:565). White icon; --ink
 * for an ink icon (FAQ yellow 2171:689).
 * Sizes come from the page, through the partial's size argument: --ic-size
 * and --ic-icon, overridden from 768 (-768) and from 1280 (-1280). Default
 * 36px with an 18px icon.
 */

.icon-circle {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--ic-size, 36px);
	height: var(--ic-size, 36px);
	border-radius: var(--radius-pill);
	color: var(--color-white);
}

.icon-circle .xat-icon {
	width: var(--ic-icon, 18px);
	height: var(--ic-icon, 18px);
}

.icon-circle--green {
	background: var(--color-green);
}

.icon-circle--green-dark {
	background: var(--color-green-dark);
}

.icon-circle--orange {
	background: var(--color-orange);
}

.icon-circle--yellow {
	background: var(--color-yellow);
}

.icon-circle--ink {
	color: var(--color-ink);
}

@media (min-width: 768px) {
	.icon-circle {
		width: var(--ic-size-768, var(--ic-size, 36px));
		height: var(--ic-size-768, var(--ic-size, 36px));
	}

	.icon-circle .xat-icon {
		width: var(--ic-icon-768, var(--ic-icon, 18px));
		height: var(--ic-icon-768, var(--ic-icon, 18px));
	}
}

@media (min-width: 1280px) {
	.icon-circle {
		width: var(--ic-size-1280, var(--ic-size-768, var(--ic-size, 36px)));
		height: var(--ic-size-1280, var(--ic-size-768, var(--ic-size, 36px)));
	}

	.icon-circle .xat-icon {
		width: var(--ic-icon-1280, var(--ic-icon-768, var(--ic-icon, 18px)));
		height: var(--ic-icon-1280, var(--ic-icon-768, var(--ic-icon, 18px)));
	}
}