@use "../abstracts/variables" as *;

.firevert-bubble {
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: $z-index;
	border-radius: var(--firevert-border-radius-circle);
	cursor: pointer;
	font-family: var(--firevert-font-family);

	&--box-shadow {
		box-shadow: var(--firevert-box-shadow);
	}

	&--bottom-left {
		left: 10px;
		right: unset;
	}

	&--hide {
		display: none;
	}

	&--hide-on-desktop {
		@media #{$xl} {
			display: none;
		}
	}

	& * {
		font-family: var(--firevert-font-family);
	}

	&__percent-wrapper {
		display: grid;
		place-items: center;
		position: absolute;
		top: -6px;
		left: -8px;
		width: 21px;
		height: 21px;
		background-color: var(--firevert-accent);
		border-radius: var(--firevert-border-radius-circle);
	}

	&__percent {
		color: var(--firevert-white);
		font-size: 14px;
		line-height: 1;
		font-weight: 700;
	}

	&__wrapper {
		display: grid;
		place-items: center;
		width: 54px;
		height: 54px;
		background-color: var(--firevert-light-black);
		border-radius: var(--firevert-border-radius-circle);

		& > svg {
			transform-origin: bottom center;
			animation: wave 2s ease-in-out infinite;
		}
	}
}

@keyframes wave {
	0%,
	100% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(-10deg);
	}
	75% {
		transform: rotate(10deg);
	}
}