.lupi-social-icon-button {
	--lupi-social-icon-button-size: 40px;
	--lupi-social-icon-button-icon-size: 24px;
	--lupi-social-icon-button-background: #101010;

	display: inline-flex;
}

.lupi-social-icon-button,
.lupi-social-icon-button *,
.lupi-social-icon-button *::before,
.lupi-social-icon-button *::after {
	box-sizing: border-box;
}

.lupi-social-icon-button :where(a, span, img) {
	margin: 0;
	padding: 0;
	border: 0;
}

a.lupi-social-icon-button__button,
span.lupi-social-icon-button__button {
	all: unset;
	box-sizing: border-box;
	width: var(--lupi-social-icon-button-size);
	height: var(--lupi-social-icon-button-size);
	display: inline-grid;
	place-items: center;
	border-radius: 999px;
	background: var(--lupi-social-icon-button-background);
	cursor: pointer;
}

span.lupi-social-icon-button__button {
	cursor: default;
}

.lupi-social-icon-button__icon {
	display: block;
	width: var(--lupi-social-icon-button-icon-size);
	height: var(--lupi-social-icon-button-icon-size);
	object-fit: contain;
}

.lupi-social-icon-button__empty {
	padding: 16px 18px;
	border: 1px dashed #d1d5db;
	border-radius: 12px;
	color: #4b5563;
	background: #f9fafb;
}