/**
 * FloatConnect frontend styles.
 *
 * @package Floatconnect
 */


/* ---------------------------------------------------------
 * Base
 * --------------------------------------------------------- */

.floatconnect {
	position: fixed;
	z-index: var(--floatconnect-z, 999999);
	box-sizing: border-box;
}

.floatconnect--bottom-right {
	right: var(--floatconnect-side, 24px);
	bottom: var(--floatconnect-bottom, 24px);
}

.floatconnect--bottom-left {
	left: var(--floatconnect-side, 24px);
	bottom: var(--floatconnect-bottom, 24px);
}


/* ---------------------------------------------------------
 * Contact
 * --------------------------------------------------------- */

.floatconnect__contact {
	background: var(--floatconnect-contact-bg, #25D366);
	color: var(--floatconnect-contact-icon, #FFFFFF);
	text-decoration: none;
	box-sizing: border-box;

	transition:
		transform 0.2s ease,
		background-color 0.2s ease,
		color 0.2s ease,
		opacity 0.2s ease,
		box-shadow 0.2s ease;
}


/* ---------------------------------------------------------
 * Single button
 * --------------------------------------------------------- */

.floatconnect__contact--single {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	width: var(--floatconnect-size, 60px);
	height: var(--floatconnect-size, 60px);

	padding: 0;
	margin: 0;

	border-radius: var(--floatconnect-radius, 50%);

	background: var(--floatconnect-contact-bg, #25D366);
	color: var(--floatconnect-contact-icon, #FFFFFF);

	box-sizing: border-box;
}

.floatconnect__contact--single:hover {
	background: var(--floatconnect-contact-hover-bg, #20BD5A);
	color: var(--floatconnect-contact-hover-icon, #FFFFFF);
	text-decoration: none;
}

.floatconnect__contact--single:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}


/* ---------------------------------------------------------
 * Disable hover
 * --------------------------------------------------------- */

.floatconnect--no-hover .floatconnect__contact:hover {
	opacity: 1;
}

.floatconnect--no-hover .floatconnect__contact {
	animation: none !important;
}


/* ---------------------------------------------------------
 * Icon
 * --------------------------------------------------------- */

.floatconnect__icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	line-height: 1;
	flex-shrink: 0;
}

.floatconnect-icon-svg {
	display: block;

	width: var(--floatconnect-icon-size, 32px);
	height: var(--floatconnect-icon-size, 32px);

	fill: currentColor;
	color: inherit;

	flex-shrink: 0;
}


/* ---------------------------------------------------------
 * Shadows
 * --------------------------------------------------------- */

.floatconnect--shadow-none .floatconnect__contact--single {
	box-shadow: none;
}

.floatconnect--shadow-soft .floatconnect__contact--single {
	box-shadow:
		0 4px 14px rgba(0, 0, 0, 0.14);
}

.floatconnect--shadow-strong .floatconnect__contact--single {
	box-shadow:
		0 8px 30px rgba(0, 0, 0, 0.24);
}


/* ---------------------------------------------------------
 * Animation - Pulse
 * --------------------------------------------------------- */

@keyframes floatconnect-pulse {

	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.06);
	}

	100% {
		transform: scale(1);
	}
}

.floatconnect--animation-pulse .floatconnect__contact--single {
	animation:
		floatconnect-pulse 2s ease-in-out infinite;
}


/* ---------------------------------------------------------
 * Animation - Bounce
 * --------------------------------------------------------- */

@keyframes floatconnect-bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-7px);
	}

	60% {
		transform: translateY(-3px);
	}
}

.floatconnect--animation-bounce .floatconnect__contact--single {
	animation:
		floatconnect-bounce 2s ease-in-out infinite;
}


/* ---------------------------------------------------------
 * Mobile - single button
 * --------------------------------------------------------- */

@media (max-width: 767px) {

	.floatconnect__contact--single {
		width: var(--floatconnect-size, 60px);
		height: var(--floatconnect-size, 60px);
	}

	.floatconnect-icon-svg {
		width: var(--floatconnect-icon-size, 32px);
		height: var(--floatconnect-icon-size, 32px);
	}
}


/* ---------------------------------------------------------
 * Reduced motion
 * --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.floatconnect *,
	.floatconnect *::before,
	.floatconnect *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;

		transition-duration: 0.01ms !important;
	}
}