.zfb {
	position: fixed;
	z-index: var(--zfb-z, 9999);
	display: flex;
	flex-direction: column;
	gap: var(--zfb-gap, 12px);
	pointer-events: none;
}

.zfb--bottom-right { bottom: var(--zfb-y, 20px); right: var(--zfb-x, 20px); }
.zfb--bottom-left  { bottom: var(--zfb-y, 20px); left: var(--zfb-x, 20px); }
.zfb--middle-right { top: 50%; right: var(--zfb-x, 20px); transform: translateY(-50%); }
.zfb--middle-left  { top: 50%; left: var(--zfb-x, 20px); transform: translateY(-50%); }

.zfb-btn {
	position: relative;
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--zfb-size, 56px);
	height: var(--zfb-size, 56px);
	border-radius: var(--zfb-radius, 50%);
	background: var(--zfb-bg, #111);
	color: var(--zfb-fg, #fff);
	box-shadow: var(--zfb-shadow, 0 6px 20px rgba(0, 0, 0, .22));
	text-decoration: none;
	transition: transform .18s ease, filter .18s ease;
}

.zfb-btn:hover,
.zfb-btn:focus-visible {
	color: var(--zfb-fg, #fff);
	filter: brightness(1.08);
	transform: translateY(-2px);
	text-decoration: none;
}

.zfb-btn:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.zfb-btn__icon {
	display: flex;
	width: 45%;
	max-width: 26px;
}

.zfb-btn__icon svg {
	width: 100%;
	height: auto;
	display: block;
}

.zfb-btn__label {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	font-size: 14px;
	line-height: 1;
	font-weight: 600;
	padding: 10px 14px;
	border-radius: 6px;
	background: var(--zfb-bg, #111);
	color: var(--zfb-fg, #fff);
	box-shadow: var(--zfb-shadow, 0 6px 20px rgba(0, 0, 0, .22));
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease;
}

.zfb--bottom-right .zfb-btn__label,
.zfb--middle-right .zfb-btn__label { right: calc(100% + 10px); }

.zfb--bottom-left .zfb-btn__label,
.zfb--middle-left .zfb-btn__label { left: calc(100% + 10px); }

.zfb-btn--label-always .zfb-btn__label { opacity: 1; visibility: visible; }
.zfb-btn--label-never .zfb-btn__label { display: none; }

.zfb-btn--label-hover:hover .zfb-btn__label,
.zfb-btn--label-hover:focus-visible .zfb-btn__label { opacity: 1; visibility: visible; }

.zfb-btn--top { opacity: 0; visibility: hidden; transition: opacity .25s ease; }
.zfb-btn--top.is-visible { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
	.zfb-btn,
	.zfb-btn__label,
	.zfb-btn--top { transition: none; }
	.zfb-btn:hover { transform: none; }
}