.wecom-wa-button {
	--wecom-wa-size: 60px;
	--wecom-wa-color: #25d366;
	--wecom-wa-bubble-bg: #fff;
	--wecom-wa-bubble-color: #4a4a4a;

	position: fixed;
	left: 25px;
	bottom: 25px;
	z-index: 9999;

	width: var(--wecom-wa-size);
	height: var(--wecom-wa-size);

	text-decoration: none;
	font-family: "Rubik", Sans-serif;
	line-height: 1;

	direction: rtl;
}

.wecom-wa-button__icon {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	background: var(--wecom-wa-color);
	color: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}

.wecom-wa-button__icon svg {
	width: 58%;
	height: 58%;
	fill: currentColor;
}

.wecom-wa-button:focus-visible .wecom-wa-button__icon {
	outline: 2px solid var(--wecom-wa-color);
	outline-offset: 3px;
}

.wecom-wa-button__bubble {
	position: absolute;
	top: 50%;
	left: calc(var(--wecom-wa-size) + 12px);
	transform: translateY(-50%) translateX(-6px);

	background: var(--wecom-wa-bubble-bg);
	color: var(--wecom-wa-bubble-color);
	padding: 10px 16px;
	border-radius: 18px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);

	font-size: 14px;
	white-space: nowrap;

	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}

@media (hover: hover) and (pointer: fine) {
	.wecom-wa-button:hover .wecom-wa-button__bubble,
	.wecom-wa-button:focus-visible .wecom-wa-button__bubble {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
}

@media (max-width: 768px) {
	.wecom-wa-button {
		left: 12px;
		bottom: 50px;
	}

	.wecom-wa-button__bubble {
		display: none;
	}
}