/*
 * makerzoid-brand / chat-button
 * Вигляд з blocksy-child/functions.php (.chat-btn): біла «пігулка» з тонкою рамкою кольору тексту.
 * Рамка — --mz-text з прозорістю 15 % (як у джерелі); фон при наведенні — найближчий токен --mz-surface-2.
 */

.mz-chat-button,
.chat-button.chat-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border: 1px solid color-mix(in srgb, var(--mz-text) 15%, transparent);
	border-radius: var(--mz-radius-pill);
	background-color: var(--mz-white);
	color: var(--mz-text);
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
}

.mz-chat-button:hover,
.mz-chat-button:focus-visible,
.chat-button.chat-btn:hover {
	border-color: color-mix(in srgb, var(--mz-text) 15%, transparent);
	background-color: var(--mz-surface-2);
	color: var(--mz-text);
}

.mz-chat-button[hidden],
.chat-button[hidden] {
	display: none;
}

.mz-chat-button__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: var(--mz-brand-blue);
	-webkit-mask: var(--mz-chat-icon) center / contain no-repeat;
	mask: var(--mz-chat-icon) center / contain no-repeat;
}

.chat-button img.img-crisp {
	margin-right: 5px;
	border-radius: var(--mz-radius-pill);
}