/* ═══════════════════════════════════════════════════════════════
   VSK FAB — Floating Action Button
   Tokens: --vsk-* (voska-vars.css)
   ═══════════════════════════════════════════════════════════════ */


/* ── Registered custom properties (animatable) ────────────────── */

@property --fab-offset-x {
	syntax: '<length>';
	inherits: false;
	initial-value: 24px;
}

@property --fab-offset-y {
	syntax: '<length>';
	inherits: false;
	initial-value: 28px;
}


/* ── Container ────────────────────────────────────────────────── */

.vsk-fab {
	position: fixed;
	z-index: 9999;
	pointer-events: none;
	transition:
		--fab-offset-x var(--vsk-trns--duration) var(--vsk-trns--ease),
		--fab-offset-y var(--vsk-trns--duration) var(--vsk-trns--ease);
}

.vsk-fab--bottom-right {
	bottom: var(--fab-offset-y, 28px);
	right:  var(--fab-offset-x, 24px);
}

.vsk-fab--bottom-left {
	bottom: var(--fab-offset-y, 28px);
	left:   var(--fab-offset-x, 24px);
}


/* ── Body (flex stack) ────────────────────────────────────────── */

.vsk-fab__body {
	display: flex;
	flex-direction: column-reverse;
	gap: 14px;
}

.vsk-fab--bottom-right .vsk-fab__body { align-items: flex-end;   }
.vsk-fab--bottom-left  .vsk-fab__body { align-items: flex-start; }


/* ── Overlay ──────────────────────────────────────────────────── */

.vsk-fab__overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	pointer-events: none;
	transition: background var(--vsk-trns--duration) var(--vsk-trns--ease);
	z-index: -1;
}

.vsk-fab.is-open .vsk-fab__overlay {
	background: rgba(0, 0, 0, 0.1);
	pointer-events: auto;
	cursor: pointer;
}


/* ── Trigger ──────────────────────────────────────────────────── */

.vsk-fab__trigger {
	width:  var(--fab-trigger-size, 56px);
	height: var(--fab-trigger-size, 56px);
	border-radius: 50%;
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fab-trigger-bg, var(--vsk-clr--primary));
	color: var(--fab-trigger-clr, #fff);
	outline: none;
	flex-shrink: 0;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
	transition:
		filter var(--vsk-trns--duration) var(--vsk-trns--ease),
		box-shadow var(--vsk-trns--duration) var(--vsk-trns--ease);
}

.vsk-fab__trigger:hover {
	filter: brightness(var(--vsk-btn--hover-brightness, 1.15));
}

.vsk-fab__trigger:focus-visible {
	box-shadow: 0 0 0 3px rgba(from var(--fab-trigger-bg, var(--vsk-clr--primary)) r g b / .35);
}

.vsk-fab__trigger .vsk-fab__icon {
	width: 24px;
	height: 24px;
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vsk-fab.is-open .vsk-fab__trigger .vsk-fab__icon {
	transform: rotate(135deg);
}


/* ── Menu container ───────────────────────────────────────────── */

.vsk-fab__menu {
	display: flex;
	flex-direction: column-reverse;
	gap: 10px;
}

.vsk-fab--bottom-right .vsk-fab__menu { align-items: flex-end;   }
.vsk-fab--bottom-left  .vsk-fab__menu { align-items: flex-start; }


/* ── Item row (label + dot) ───────────────────────────────────── */

.vsk-fab__item {
	display: flex;
	align-items: center;
	gap: 12px;

	/* start state — animated via JS class toggle */
	opacity: 0;
	transform: translateY(20px) scale(0.4);
	pointer-events: none;
	transition-property: opacity, transform;
	/* duration, timing-function, delay set by JS per-item */
}

.vsk-fab--bottom-right .vsk-fab__item {
	transform-origin: right center;
}

.vsk-fab--bottom-left .vsk-fab__item {
	transform-origin: left center;
	flex-direction: row-reverse;
}

.vsk-fab__item.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}


/* ── Emerge animation mode ────────────────────────────────────── 
   Items slide vertically from the trigger position — no scale,
   centered origin, clean look. Each item calculates its own
   offset via --fab-i (set in PHP, 0-based).
   
   Offset per item = body gap (14px)
                   + (index + 1) × item size
                   + index × menu gap (10px)
   ──────────────────────────────────────────────────────────────── */

.vsk-fab--emerge .vsk-fab__item {
	transform-origin: center center;
	transform: translateY(
		calc(
			  14px
			+ (var(--fab-i, 0) + 1) * var(--fab-item-size, 46px)
			+ var(--fab-i, 0) * 10px
		)
	);
}

.vsk-fab--emerge .vsk-fab__item.is-visible {
	transform: translateY(0);
}


/* ── Dot (icon circle) ────────────────────────────────────────── */

.vsk-fab__dot {
	width:  var(--fab-item-size, 46px);
	height: var(--fab-item-size, 46px);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: var(--fab-dot-bg, var(--vsk-clr--primary));
	color: var(--fab-dot-clr, #fff);
	text-decoration: none;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	transition:
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow var(--vsk-trns--duration) var(--vsk-trns--ease),
		opacity 0.2s var(--vsk-trns--ease);
}

.vsk-fab__dot:hover {
	transform: scale(1.12);
}

.vsk-fab__dot:focus-visible {
	box-shadow: 0 0 0 3px rgba(from var(--fab-dot-bg, var(--vsk-clr--primary)) r g b / .35);
}

.vsk-fab__dot .vsk-fab__icon {
	width: 20px;
	height: 20px;
	overflow: visible;
	flex-shrink: 0;
}


/* ── Label ─────────────────────────────────────────────────────── 
   Font: delegated to .vsk-p .vsk-ps .vsk-pb utility classes.
   Only shape + color handled here.
   ──────────────────────────────────────────────────────────────── */

.vsk-fab__label {
	background: var(--vsk-clr--dark);
	color: var(--vsk-clr--light);
	padding: 6px 14px;
	border-radius: var(--vsk-bdr-rad--s, 6px);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	transition: opacity 0.2s var(--vsk-trns--ease);
}


/* ── Sibling dimming ──────────────────────────────────────────── 
   When any item is hovered or focused, dim all OTHER visible
   items. Dots dim in both label modes. Labels dim only in
   labels="visible" — in labels="hover" mode labels have their
   own opacity control and dimming would override their hidden state.
   ──────────────────────────────────────────────────────────────── */

.vsk-fab__menu:hover .vsk-fab__item.is-visible .vsk-fab__dot,
.vsk-fab__menu:focus-within .vsk-fab__item.is-visible .vsk-fab__dot {
	opacity: 0.7;
}

.vsk-fab:not(.vsk-fab--labels-hover) .vsk-fab__menu:hover .vsk-fab__item.is-visible .vsk-fab__label,
.vsk-fab:not(.vsk-fab--labels-hover) .vsk-fab__menu:focus-within .vsk-fab__item.is-visible .vsk-fab__label {
	opacity: 0.7;
}

/* Un-dim the active item — .vsk-fab__menu ancestor matches dimming specificity,
   source order (later in file) breaks the tie in our favor. */
.vsk-fab__menu .vsk-fab__item.is-visible:hover .vsk-fab__dot,
.vsk-fab__menu .vsk-fab__item.is-visible:focus-within .vsk-fab__dot,
.vsk-fab:not(.vsk-fab--labels-hover) .vsk-fab__menu .vsk-fab__item.is-visible:hover .vsk-fab__label,
.vsk-fab:not(.vsk-fab--labels-hover) .vsk-fab__menu .vsk-fab__item.is-visible:focus-within .vsk-fab__label {
	opacity: 1;
}


/* ── Labels on hover ──────────────────────────────────────────── 
   labels="hover" — on devices with hover capability, items are
   icon-only circles and labels appear on hover / focus.
   On touch devices (no hover) labels stay visible in normal flow.
   ──────────────────────────────────────────────────────────────── */

@media (hover: hover) {

	.vsk-fab--labels-hover .vsk-fab__item {
		position: relative;
	}

	.vsk-fab--labels-hover .vsk-fab__label {
		position: absolute;
		top: 50%;
		opacity: 0;
		transition:
			opacity 0.2s var(--vsk-trns--ease),
			transform 0.2s var(--vsk-trns--ease);
	}

	/* bottom-right: label floats left of dot, slides in from right */
	.vsk-fab--labels-hover.vsk-fab--bottom-right .vsk-fab__label {
		right: calc(100% + 10px);
		transform: translateY(-50%) translateX(6px);
	}

	/* bottom-left: label floats right of dot, slides in from left */
	.vsk-fab--labels-hover.vsk-fab--bottom-left .vsk-fab__label {
		left: calc(100% + 10px);
		transform: translateY(-50%) translateX(-6px);
	}

	/* Reveal on hover or keyboard focus */
	.vsk-fab--labels-hover .vsk-fab__item:hover .vsk-fab__label,
	.vsk-fab--labels-hover .vsk-fab__item:focus-within .vsk-fab__label {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(-50%) translateX(0);
	}

}


/* ── Reduced motion ───────────────────────────────────────────── */

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

	.vsk-fab__trigger .vsk-fab__icon,
	.vsk-fab__item,
	.vsk-fab__dot,
	.vsk-fab__label,
	.vsk-fab__overlay {
		transition-duration: 0.01ms !important;
		transition-delay:    0ms    !important;
	}

	.vsk-fab__item {
		transform: none;
	}

	.vsk-fab__item.is-visible {
		transform: none;
	}
}