/*
 * Wing Suite Pro Dark Mode: the twelve Pro switch styles, the floating
 * switch extras (tooltip, attention effects, delayed appearance, auto-hide,
 * drag, phone variant) and the login-page switch.
 *
 * Loaded after Free's dm-switch.css and built on its markup: a button with
 * two icons, a track and a thumb, and the four --wsdm-switch-* colour
 * variables. Pro styles carry .wingsuite-dm-switch--pro plus their own
 * modifier.
 */

/* ---------- shared ---------- */
.wingsuite-dm-switch--pro .wingsuite-dm-switch__icon--custom {
	object-fit: contain;
}
.wingsuite-dm-switch__icon--custom {
	width: var(--wsdm-switch-icon);
	height: var(--wsdm-switch-icon);
	object-fit: contain;
}

/* Glass: frosted pill, blurred backdrop, soft border. */
.wingsuite-dm-switch--glass .wingsuite-dm-switch__track {
	width: calc(var(--wsdm-switch-size) * 1.9);
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
	backdrop-filter: blur(10px) saturate(1.4);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 8px 24px rgba(0, 0, 0, 0.12);
}
html.wingsuite-dark .wingsuite-dm-switch--glass .wingsuite-dm-switch__track {
	background: rgba(30, 30, 40, 0.55);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 8px 24px rgba(0, 0, 0, 0.4);
}
.wingsuite-dm-switch--glass .wingsuite-dm-switch__thumb {
	opacity: 1;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
html.wingsuite-dark .wingsuite-dm-switch--glass .wingsuite-dm-switch__thumb {
	background: rgba(255, 255, 255, 0.18);
	transform: translateX(calc(var(--wsdm-switch-size) * 0.9));
}
.wingsuite-dm-switch--glass .wingsuite-dm-switch__track .wingsuite-dm-switch__icon {
	position: relative;
	z-index: 1;
}

/* Neon: dark round button with a glowing outline in the icon colour. */
.wingsuite-dm-switch--neon .wingsuite-dm-switch__track {
	width: var(--wsdm-switch-size);
	height: var(--wsdm-switch-size);
	padding: 0;
	justify-content: center;
	background: #0b0b12;
	color: #22d3ee;
	box-shadow: 0 0 0 2px currentColor, 0 0 14px currentColor, inset 0 0 10px rgba(34, 211, 238, 0.35);
	transition: color 0.25s ease, box-shadow 0.25s ease;
}
html.wingsuite-dark .wingsuite-dm-switch--neon .wingsuite-dm-switch__track {
	background: #0b0b12;
	color: #f472b6;
	box-shadow: 0 0 0 2px currentColor, 0 0 18px currentColor, inset 0 0 10px rgba(244, 114, 182, 0.35);
}
.wingsuite-dm-switch--neon .wingsuite-dm-switch__thumb {
	display: none;
}
.wingsuite-dm-switch--neon .wingsuite-dm-switch__track .wingsuite-dm-switch__icon {
	position: absolute;
	width: calc(var(--wsdm-switch-size) * 0.55);
	height: calc(var(--wsdm-switch-size) * 0.55);
	opacity: 1;
	filter: drop-shadow(0 0 6px currentColor);
	transition: opacity 0.25s ease, transform 0.35s ease;
}
.wingsuite-dm-switch--neon .wingsuite-dm-switch__icon--sun {
	opacity: 0;
	transform: rotate(-90deg) scale(0.5);
}
html.wingsuite-dark .wingsuite-dm-switch--neon .wingsuite-dm-switch__icon--sun {
	opacity: 1;
	transform: none;
}
html.wingsuite-dark .wingsuite-dm-switch--neon .wingsuite-dm-switch__icon--moon {
	opacity: 0;
	transform: rotate(90deg) scale(0.5);
}

/* Square: rounded-square button, one icon at a time, crossfade. */
.wingsuite-dm-switch--square .wingsuite-dm-switch__track,
.wingsuite-dm-switch--outline .wingsuite-dm-switch__track,
.wingsuite-dm-switch--flip .wingsuite-dm-switch__track,
.wingsuite-dm-switch--dot .wingsuite-dm-switch__track,
.wingsuite-dm-switch--bulb .wingsuite-dm-switch__track,
.wingsuite-dm-switch--eclipse .wingsuite-dm-switch__track {
	width: var(--wsdm-switch-size);
	height: var(--wsdm-switch-size);
	padding: 0;
	justify-content: center;
}
.wingsuite-dm-switch--square .wingsuite-dm-switch__thumb,
.wingsuite-dm-switch--outline .wingsuite-dm-switch__thumb,
.wingsuite-dm-switch--flip .wingsuite-dm-switch__thumb,
.wingsuite-dm-switch--dot .wingsuite-dm-switch__thumb,
.wingsuite-dm-switch--bulb .wingsuite-dm-switch__thumb,
.wingsuite-dm-switch--eclipse .wingsuite-dm-switch__thumb,
.wingsuite-dm-switch--cosmic .wingsuite-dm-switch__thumb {
	display: none;
}
.wingsuite-dm-switch--square .wingsuite-dm-switch__track .wingsuite-dm-switch__icon,
.wingsuite-dm-switch--outline .wingsuite-dm-switch__track .wingsuite-dm-switch__icon,
.wingsuite-dm-switch--dot .wingsuite-dm-switch__track .wingsuite-dm-switch__icon,
.wingsuite-dm-switch--bulb .wingsuite-dm-switch__track .wingsuite-dm-switch__icon {
	position: absolute;
	width: calc(var(--wsdm-switch-size) * 0.5);
	height: calc(var(--wsdm-switch-size) * 0.5);
	opacity: 1;
	transition: opacity 0.2s ease, transform 0.3s ease;
}
.wingsuite-dm-switch--square .wingsuite-dm-switch__icon--sun,
.wingsuite-dm-switch--outline .wingsuite-dm-switch__icon--sun,
.wingsuite-dm-switch--dot .wingsuite-dm-switch__icon--sun,
.wingsuite-dm-switch--bulb .wingsuite-dm-switch__icon--sun {
	opacity: 0;
	transform: scale(0.6);
}
html.wingsuite-dark .wingsuite-dm-switch--square .wingsuite-dm-switch__icon--sun,
html.wingsuite-dark .wingsuite-dm-switch--outline .wingsuite-dm-switch__icon--sun,
html.wingsuite-dark .wingsuite-dm-switch--dot .wingsuite-dm-switch__icon--sun,
html.wingsuite-dark .wingsuite-dm-switch--bulb .wingsuite-dm-switch__icon--sun {
	opacity: 1;
	transform: none;
}
html.wingsuite-dark .wingsuite-dm-switch--square .wingsuite-dm-switch__icon--moon,
html.wingsuite-dark .wingsuite-dm-switch--outline .wingsuite-dm-switch__icon--moon,
html.wingsuite-dark .wingsuite-dm-switch--dot .wingsuite-dm-switch__icon--moon,
html.wingsuite-dark .wingsuite-dm-switch--bulb .wingsuite-dm-switch__icon--moon {
	opacity: 0;
	transform: scale(0.6);
}
.wingsuite-dm-switch--square .wingsuite-dm-switch__track {
	border-radius: calc(var(--wsdm-switch-size) * 0.28);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.wingsuite-dm-switch--square:hover .wingsuite-dm-switch__track {
	transform: translateY(-1px);
}

/* Outline: transparent ring in the icon colour. */
.wingsuite-dm-switch--outline .wingsuite-dm-switch__track {
	background: transparent;
	box-shadow: inset 0 0 0 2px currentColor;
	transition: box-shadow 0.2s ease, background 0.2s ease;
}
html.wingsuite-dark .wingsuite-dm-switch--outline .wingsuite-dm-switch__track {
	background: transparent;
}
.wingsuite-dm-switch--outline:hover .wingsuite-dm-switch__track {
	background: rgba(127, 127, 127, 0.08);
}

/* Gradient: a pill painted with a sunrise / night gradient, knob with icon. */
.wingsuite-dm-switch--gradient .wingsuite-dm-switch__track {
	width: calc(var(--wsdm-switch-size) * 1.9);
	background: linear-gradient(120deg, #fbbf24, #f97316 60%, #fb7185);
	color: #fff;
	box-shadow: 0 6px 18px rgba(249, 115, 22, 0.35);
	transition: background 0.4s ease, box-shadow 0.4s ease;
}
html.wingsuite-dark .wingsuite-dm-switch--gradient .wingsuite-dm-switch__track {
	background: linear-gradient(120deg, #312e81, #6d28d9 60%, #0ea5e9);
	color: #fff;
	box-shadow: 0 6px 18px rgba(109, 40, 217, 0.4);
}
.wingsuite-dm-switch--gradient .wingsuite-dm-switch__thumb {
	opacity: 1;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
html.wingsuite-dark .wingsuite-dm-switch--gradient .wingsuite-dm-switch__thumb {
	transform: translateX(calc(var(--wsdm-switch-size) * 0.9));
	background: #0f172a;
}
.wingsuite-dm-switch--gradient .wingsuite-dm-switch__track .wingsuite-dm-switch__icon {
	position: relative;
	z-index: 1;
	opacity: 0.9;
}

/* Eclipse: the moon slides across the sun. */
.wingsuite-dm-switch--eclipse .wingsuite-dm-switch__track {
	background: radial-gradient(circle at 50% 50%, #fde68a 0 38%, #f59e0b 40% 46%, transparent 48%), var(--wsdm-switch-bg);
	overflow: hidden;
	transition: background 0.4s ease;
}
html.wingsuite-dark .wingsuite-dm-switch--eclipse .wingsuite-dm-switch__track {
	background: radial-gradient(circle at 50% 50%, #0f172a 0 40%, #f59e0b 41% 46%, transparent 48%), var(--wsdm-switch-bg-dark);
}
.wingsuite-dm-switch--eclipse .wingsuite-dm-switch__icon {
	display: none;
}
.wingsuite-dm-switch--eclipse .wingsuite-dm-switch__track::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--wsdm-switch-size) * 0.72);
	height: calc(var(--wsdm-switch-size) * 0.72);
	border-radius: 50%;
	background: #1e293b;
	transform: translate(80%, -50%);
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: inset -4px 2px 0 rgba(255, 255, 255, 0.06);
}
html.wingsuite-dark .wingsuite-dm-switch--eclipse .wingsuite-dm-switch__track::after {
	transform: translate(-50%, -50%);
}

/* Bulb: an outline bulb that lights up in dark mode. */
.wingsuite-dm-switch--bulb .wingsuite-dm-switch__track {
	background: var(--wsdm-switch-bg);
	border-radius: 50%;
}
html.wingsuite-dark .wingsuite-dm-switch--bulb .wingsuite-dm-switch__track {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 22px rgba(251, 191, 36, 0.55);
}
.wingsuite-dm-switch--bulb .wingsuite-dm-switch__track .wingsuite-dm-switch__icon {
	width: calc(var(--wsdm-switch-size) * 0.58);
	height: calc(var(--wsdm-switch-size) * 0.58);
}

/* Cosmic: a wide sky that turns from day to a starry night. */
.wingsuite-dm-switch--cosmic .wingsuite-dm-switch__track {
	width: calc(var(--wsdm-switch-size) * 2.1);
	height: calc(var(--wsdm-switch-size) * 0.9);
	padding: 0 calc(var(--wsdm-switch-size) * 0.18);
	background: linear-gradient(180deg, #7dd3fc, #e0f2fe);
	color: #f59e0b;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.12);
	transition: background 0.5s ease, color 0.5s ease;
}
html.wingsuite-dark .wingsuite-dm-switch--cosmic .wingsuite-dm-switch__track {
	background:
		radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.6px),
		radial-gradient(circle at 35% 70%, rgba(255, 255, 255, 0.8) 0 0.8px, transparent 1.4px),
		radial-gradient(circle at 55% 25%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.6px),
		radial-gradient(circle at 70% 65%, rgba(255, 255, 255, 0.7) 0 0.8px, transparent 1.4px),
		linear-gradient(180deg, #0f172a, #312e81);
	color: #fde68a;
}
.wingsuite-dm-switch--cosmic .wingsuite-dm-switch__track .wingsuite-dm-switch__icon {
	position: absolute;
	top: 50%;
	width: calc(var(--wsdm-switch-size) * 0.6);
	height: calc(var(--wsdm-switch-size) * 0.6);
	opacity: 1;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.wingsuite-dm-switch--cosmic .wingsuite-dm-switch__icon--sun {
	left: calc(var(--wsdm-switch-size) * 0.15);
	transform: translateY(-50%);
}
.wingsuite-dm-switch--cosmic .wingsuite-dm-switch__icon--moon {
	left: calc(var(--wsdm-switch-size) * 0.15);
	transform: translate(0, 120%);
	opacity: 0;
}
html.wingsuite-dark .wingsuite-dm-switch--cosmic .wingsuite-dm-switch__icon--sun {
	transform: translate(0, 120%);
	opacity: 0;
}
html.wingsuite-dark .wingsuite-dm-switch--cosmic .wingsuite-dm-switch__icon--moon {
	transform: translate(calc(var(--wsdm-switch-size) * 1.2), -50%);
	opacity: 1;
}

/* Flip: a card that turns over. */
.wingsuite-dm-switch--flip {
	perspective: 300px;
}
.wingsuite-dm-switch--flip .wingsuite-dm-switch__track {
	border-radius: calc(var(--wsdm-switch-size) * 0.25);
	transform-style: preserve-3d;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s ease;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
html.wingsuite-dark .wingsuite-dm-switch--flip .wingsuite-dm-switch__track {
	transform: rotateY(180deg);
}
.wingsuite-dm-switch--flip .wingsuite-dm-switch__track .wingsuite-dm-switch__icon {
	position: absolute;
	width: calc(var(--wsdm-switch-size) * 0.5);
	height: calc(var(--wsdm-switch-size) * 0.5);
	opacity: 1;
	backface-visibility: hidden;
}
.wingsuite-dm-switch--flip .wingsuite-dm-switch__icon--sun {
	transform: rotateY(180deg);
}

/* Tab: a labelled tab that hugs the screen edge (floating) or sits inline. */
.wingsuite-dm-switch--tab {
	gap: 0;
	padding: 0 calc(var(--wsdm-switch-size) * 0.3) 0 calc(var(--wsdm-switch-size) * 0.2);
	height: calc(var(--wsdm-switch-size) * 0.9);
	border-radius: 999px;
	background: var(--wsdm-switch-bg);
	color: var(--wsdm-switch-fg);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
	font-size: 0.875em;
	font-weight: 600;
	transition: background 0.2s ease, color 0.2s ease;
}
html.wingsuite-dark .wingsuite-dm-switch--tab {
	background: var(--wsdm-switch-bg-dark);
	color: var(--wsdm-switch-fg-dark);
}
.wingsuite-dm-switch--tab .wingsuite-dm-switch__track {
	width: calc(var(--wsdm-switch-size) * 0.9);
	height: calc(var(--wsdm-switch-size) * 0.9);
	padding: 0;
	justify-content: center;
	background: transparent;
	box-shadow: none;
}
.wingsuite-dm-switch--tab .wingsuite-dm-switch__thumb {
	display: none;
}
.wingsuite-dm-switch--tab .wingsuite-dm-switch__track .wingsuite-dm-switch__icon {
	position: absolute;
	opacity: 1;
	transition: opacity 0.2s ease;
}
.wingsuite-dm-switch--tab .wingsuite-dm-switch__icon--sun,
html.wingsuite-dark .wingsuite-dm-switch--tab .wingsuite-dm-switch__icon--moon {
	opacity: 0;
}
html.wingsuite-dark .wingsuite-dm-switch--tab .wingsuite-dm-switch__icon--sun {
	opacity: 1;
}
.wingsuite-dm-switch--tab .wingsuite-dm-switch__text {
	white-space: nowrap;
	line-height: 1;
}
.wingsuite-dm-floating--bottom-right .wingsuite-dm-switch--tab,
.wingsuite-dm-floating--top-right .wingsuite-dm-switch--tab {
	border-radius: 999px 0 0 999px;
	margin-right: calc(-1 * var(--wsdm-offset-x));
	padding-right: calc(var(--wsdm-switch-size) * 0.4);
}
.wingsuite-dm-floating--bottom-left .wingsuite-dm-switch--tab,
.wingsuite-dm-floating--top-left .wingsuite-dm-switch--tab {
	border-radius: 0 999px 999px 0;
	margin-left: calc(-1 * var(--wsdm-offset-x));
	flex-direction: row-reverse;
	padding-left: calc(var(--wsdm-switch-size) * 0.4);
}

/* Dot: a tiny dot that grows into the icon on hover. */
.wingsuite-dm-switch--dot .wingsuite-dm-switch__track {
	width: calc(var(--wsdm-switch-size) * 0.45);
	height: calc(var(--wsdm-switch-size) * 0.45);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	transition: width 0.25s ease, height 0.25s ease, background 0.2s ease;
}
.wingsuite-dm-switch--dot .wingsuite-dm-switch__track .wingsuite-dm-switch__icon {
	transition: opacity 0.2s ease 0.1s, transform 0.3s ease;
}
.wingsuite-dm-switch--dot .wingsuite-dm-switch__icon--moon,
html.wingsuite-dark .wingsuite-dm-switch--dot .wingsuite-dm-switch__icon--sun {
	opacity: 0;
}
.wingsuite-dm-switch--dot:hover .wingsuite-dm-switch__track,
.wingsuite-dm-switch--dot:focus-visible .wingsuite-dm-switch__track {
	width: var(--wsdm-switch-size);
	height: var(--wsdm-switch-size);
}
.wingsuite-dm-switch--dot:hover .wingsuite-dm-switch__icon--moon,
.wingsuite-dm-switch--dot:focus-visible .wingsuite-dm-switch__icon--moon {
	opacity: 1;
}
html.wingsuite-dark .wingsuite-dm-switch--dot:hover .wingsuite-dm-switch__icon--moon,
html.wingsuite-dark .wingsuite-dm-switch--dot:focus-visible .wingsuite-dm-switch__icon--moon {
	opacity: 0;
}
html.wingsuite-dark .wingsuite-dm-switch--dot:hover .wingsuite-dm-switch__icon--sun,
html.wingsuite-dark .wingsuite-dm-switch--dot:focus-visible .wingsuite-dm-switch__icon--sun {
	opacity: 1;
}

/* Retro: a chunky rocker switch, bevelled, with a travel groove. */
.wingsuite-dm-switch--retro .wingsuite-dm-switch__track {
	width: calc(var(--wsdm-switch-size) * 1.9);
	height: calc(var(--wsdm-switch-size) * 0.95);
	padding: 0 calc(var(--wsdm-switch-size) * 0.16);
	border-radius: calc(var(--wsdm-switch-size) * 0.2);
	background: linear-gradient(180deg, #e5e7eb, #cbd5e1);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.7), 0 2px 0 #94a3b8, 0 6px 14px rgba(0, 0, 0, 0.18);
	color: #475569;
}
html.wingsuite-dark .wingsuite-dm-switch--retro .wingsuite-dm-switch__track {
	background: linear-gradient(180deg, #334155, #1e293b);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.08), 0 2px 0 #0f172a, 0 6px 14px rgba(0, 0, 0, 0.4);
	color: #fbbf24;
}
.wingsuite-dm-switch--retro .wingsuite-dm-switch__thumb {
	top: calc(var(--wsdm-switch-size) * 0.12);
	left: calc(var(--wsdm-switch-size) * 0.12);
	width: calc(var(--wsdm-switch-size) * 0.85);
	height: calc(var(--wsdm-switch-size) * 0.7);
	border-radius: calc(var(--wsdm-switch-size) * 0.14);
	opacity: 1;
	background: linear-gradient(180deg, #ffffff, #e2e8f0);
	box-shadow: 0 3px 0 #94a3b8, 0 4px 8px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
html.wingsuite-dark .wingsuite-dm-switch--retro .wingsuite-dm-switch__thumb {
	transform: translateX(calc(var(--wsdm-switch-size) * 0.8));
	background: linear-gradient(180deg, #475569, #334155);
	box-shadow: 0 3px 0 #0f172a, 0 4px 8px rgba(0, 0, 0, 0.5);
}
.wingsuite-dm-switch--retro .wingsuite-dm-switch__track .wingsuite-dm-switch__icon {
	position: relative;
	z-index: 1;
}

/* ---------- floating extras ---------- */

/* Tooltip: a small bubble on the inner side, visible on hover / focus. */
.wingsuite-dm-floating {
	--wsdm-tooltip-bg: #0f172a;
	--wsdm-tooltip-fg: #ffffff;
}
.wingsuite-dm-tooltip {
	position: absolute;
	top: 50%;
	padding: 6px 10px;
	border-radius: 8px;
	background: var(--wsdm-tooltip-bg);
	color: var(--wsdm-tooltip-fg);
	font: 600 12px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%) translateX(6px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}
html.wingsuite-dark .wingsuite-dm-tooltip {
	--wsdm-tooltip-bg: #f8fafc;
	--wsdm-tooltip-fg: #0f172a;
}
.wingsuite-dm-floating--bottom-right .wingsuite-dm-tooltip,
.wingsuite-dm-floating--top-right .wingsuite-dm-tooltip {
	right: calc(100% + 10px);
}
.wingsuite-dm-floating--bottom-left .wingsuite-dm-tooltip,
.wingsuite-dm-floating--top-left .wingsuite-dm-tooltip {
	left: calc(100% + 10px);
	transform: translateY(-50%) translateX(-6px);
}
.wingsuite-dm-floating:hover .wingsuite-dm-tooltip,
.wingsuite-dm-floating:focus-within .wingsuite-dm-tooltip,
.wingsuite-dm-floating[data-wsdm-attention-on] .wingsuite-dm-tooltip {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}
.wingsuite-dm-floating--moved .wingsuite-dm-tooltip {
	display: none;
}

/* Delayed appearance. */
.wingsuite-dm-floating--pending {
	opacity: 0;
	visibility: hidden;
}
.wingsuite-dm-floating--shown {
	opacity: 1;
	visibility: visible;
	animation: wsdm-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes wsdm-pop-in {
	from { opacity: 0; transform: scale(0.6); }
	to { opacity: 1; transform: none; }
}

/* Auto-hide: slide towards the nearest edge, leave a sliver. */
.wingsuite-dm-floating {
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.wingsuite-dm-floating--hidden.wingsuite-dm-floating--bottom-right,
.wingsuite-dm-floating--hidden.wingsuite-dm-floating--top-right {
	transform: translateX(calc(100% + var(--wsdm-offset-x) - 14px));
}
.wingsuite-dm-floating--hidden.wingsuite-dm-floating--bottom-left,
.wingsuite-dm-floating--hidden.wingsuite-dm-floating--top-left {
	transform: translateX(calc(-100% - var(--wsdm-offset-x) + 14px));
}
.wingsuite-dm-floating--hidden.wingsuite-dm-floating--moved {
	transform: none;
	opacity: 0.35;
}

/* Attention effects: played after the switch appears, a few cycles. */
.wingsuite-dm-floating[data-wsdm-attention-on="pulse"] .wingsuite-dm-switch { animation: wsdm-pulse 1.2s ease-in-out 3; }
.wingsuite-dm-floating[data-wsdm-attention-on="shake"] .wingsuite-dm-switch { animation: wsdm-shake 0.8s ease-in-out 3; }
.wingsuite-dm-floating[data-wsdm-attention-on="bounce"] .wingsuite-dm-switch { animation: wsdm-bounce 1s cubic-bezier(0.28, 0.84, 0.42, 1) 3; }
.wingsuite-dm-floating[data-wsdm-attention-on="glow"] .wingsuite-dm-switch { animation: wsdm-glow 1.4s ease-in-out 3; border-radius: 999px; }
@keyframes wsdm-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.12); }
}
@keyframes wsdm-shake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-5px) rotate(-4deg); }
	40%, 80% { transform: translateX(5px) rotate(4deg); }
}
@keyframes wsdm-bounce {
	0%, 100% { transform: translateY(0); }
	40% { transform: translateY(-14px); }
	60% { transform: translateY(-6px); }
}
@keyframes wsdm-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
	50% { box-shadow: 0 0 0 12px rgba(124, 58, 237, 0.35); }
}

/* Drag. */
.wingsuite-dm-floating[data-wsdm-drag] {
	cursor: grab;
	touch-action: none;
}
.wingsuite-dm-floating--dragging {
	cursor: grabbing;
	transition: none;
}
.wingsuite-dm-floating--dragging .wingsuite-dm-switch {
	pointer-events: none;
}

/* Phone variant: the second switch shows under 783px, the first above. */
.wingsuite-dm-floating--dual .wingsuite-dm-switch--phone {
	display: none;
}
@media (max-width: 782px) {
	.wingsuite-dm-floating--dual .wingsuite-dm-switch:not(.wingsuite-dm-switch--phone) {
		display: none;
	}
	.wingsuite-dm-floating--dual .wingsuite-dm-switch--phone {
		display: inline-flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wingsuite-dm-floating,
	.wingsuite-dm-floating--shown,
	.wingsuite-dm-floating .wingsuite-dm-switch,
	.wingsuite-dm-switch--pro .wingsuite-dm-switch__track,
	.wingsuite-dm-switch--pro .wingsuite-dm-switch__track::after,
	.wingsuite-dm-switch--pro .wingsuite-dm-switch__icon {
		animation: none !important;
		transition: none !important;
	}
}