$co-whatsapp: #25d366;

.chat {
	position: fixed;
	z-index: $z-index-chat;
	bottom: $sp-4;
	right: $sp-4;
}

.chat-btn-toggle {
	@include bitSize();
	padding: 0;
	@include bitSize('ico');
	display: flex;
	align-items: center;
	justify-content: center;
	color: $co-base-1;
	background-color: $co-whatsapp;
	border-radius: 50%;

	&:hover {
		color: $co-base-1;
		background-color: lighten($co-whatsapp, 5%);
	}
	&:focus { color: $co-base-1;}

	.ico { transform: scale(1.25);}

	&:before {
		content:"";
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: $co-whatsapp;
		border-radius: 50%;
		opacity: 0.6;
		transform: scale3d(1,1,1);
		animation: PulseBtn 1.5s linear infinite;
	}

	.chat:not(.chat-is-open) & {
		.ico:last-child { display: none;}
	}
	.chat-is-open & {
		.ico:first-child { display: none;}
	}
}

.chat-item {
	position: absolute;
	bottom: 100%;
	right: 0;
	width: 32.8rem;
	margin-bottom: $sp-4;
	box-shadow: $shadow-md-v;
	border-radius: $border-radius-2;
	opacity: 0;
	transform: scale3d(0,0,0);
	transform-origin: 93% 120%;
	transition: transform .3s ease-in-out, opacity .3s linear;

	.chat-is-open & {
		opacity: 1;
		transform: scale3d(1,1,1);
	}
}

.chat-header {
	padding: $sp-2 $sp-3;
	text-align: center;
	color: $co-base-1;
	background-color: $co-whatsapp;
	border-radius: $border-radius-2 $border-radius-2 0 0;
}

.chat-body {
	padding: $sp-3;
	background-color: $co-gray-70;
	border-radius: 0 0 $border-radius-2 $border-radius-2;
}

.chat-msg-in {
	position: relative;
	padding: $sp-2 $sp-3;
	margin: $sp-3 $sp-6 $sp-lg-1 $sp-4;
	background-color: $co-base-1;
	border-radius: $border-radius-2;
	border-top-left-radius: 0;

	&:after {
		content: "";
		display: block;
		position: absolute;
		right: 100%;
		top: 0;
		border-top: 12px solid $co-base-1;
		border-left: 12px solid transparent;
	}
}

.chat-controls {
	display: flex;
	gap: $sp-3;

	.input {
		border-color: transparent;
		border-radius: $border-radius-1;
	}
}

.chat-btn-send {
	color: $co-base-1;
	background-color: $co-whatsapp;

	&:hover {
		color: $co-base-1;
		background-color: lighten($co-whatsapp, 5%);
	}
	&:focus { color: $co-base-1;}
}

@include mediaQ(sm) {
	.chat {
		bottom: $sp-6;
		right: $sp-6;

		&-btn-toggle {
			width: 7rem;
			height: 7rem;
			.ico { transform: scale(2);}
		}
	}
}