/**
 * BIM Plugin — floating icons (frontend)
 */

.bim-floating-icons {
	--bim-expand: 16px;
	--bim-tab-width: 52px;
	--bim-tab-height: 48px;
	--bim-gap: 8px;
	--bim-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);

	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 99990;
	pointer-events: none;
}

.bim-floating-icons__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--bim-gap);
}

.bim-floating-icons__item {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

.bim-floating-icons__link {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--bim-tab-width);
	height: var(--bim-tab-height);
	background-color: var(--bim-color, #9acd32);
	color: #fff;
	text-decoration: none;
	border-radius: 50px 0 0 50px;
	box-shadow: var(--bim-shadow);
	transition:
		width 0.3s ease,
		background-color 0.3s ease,
		color 0.3s ease,
		box-shadow 0.3s ease;
}

.bim-floating-icons__link i {
	font-size: 20px;
	line-height: 1;
	transition: color 0.3s ease;
}

.bim-floating-icons__link:hover,
.bim-floating-icons__link:focus-visible {
	width: calc(var(--bim-tab-width) + var(--bim-expand));
	background-color: #fff;
	color: var(--bim-color, #9acd32);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
	outline: none;
}

.bim-floating-icons__link:focus-visible {
	box-shadow:
		0 4px 16px rgba(0, 0, 0, 0.22),
		0 0 0 2px var(--bim-color, #9acd32);
}

@media (max-width: 480px) {
	.bim-floating-icons {
		--bim-tab-width: 46px;
		--bim-tab-height: 44px;
		--bim-expand: 12px;
	}

	.bim-floating-icons__link i {
		font-size: 18px;
	}
}