/* Before / After (mauve-before-after) */
@property --ba-pos {
	syntax: '<percentage>';
	inherits: true;
	initial-value: 50%;
}

.ms-ba {
	--ba-pos: 50%;
	--ba-line: #FFFFFF;
	--ba-line-w: 2px;
	--ba-knob: 52px;
	--ba-label-offset: 18px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	cursor: ew-resize;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.ms-ba--vertical {
	cursor: ns-resize;
	touch-action: pan-x;
}

/* Click-to-jump glides; dragging follows the pointer 1:1. */
.ms-ba.is-animating {
	transition: --ba-pos .45s cubic-bezier(.2, .7, .2, 1);
}

.ms-ba__layer {
	position: relative;
}

.ms-ba__layer--before {
	position: absolute;
	inset: 0;
	z-index: 1;
	clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
}

.ms-ba--vertical .ms-ba__layer--before {
	clip-path: inset(0 0 calc(100% - var(--ba-pos)) 0);
}

.ms-ba .ms-ba__img {
	display: block;
	width: 100%;
	max-width: none;
	height: var(--ba-h, auto);
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	pointer-events: none;
	-webkit-user-drag: none;
}

.ms-ba .ms-ba__layer--before .ms-ba__img {
	position: absolute;
	inset: 0;
	height: 100%;
}

/* Divider + handle */
.ms-ba__handle {
	position: absolute;
	z-index: 3;
	top: 0;
	bottom: 0;
	left: var(--ba-pos);
	width: 0;
	outline: none;
}

.ms-ba--vertical .ms-ba__handle {
	top: var(--ba-pos);
	bottom: auto;
	left: 0;
	right: 0;
	width: auto;
	height: 0;
}

.ms-ba__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--ba-line-w) / -2);
	width: var(--ba-line-w);
	background-color: var(--ba-line);
	box-shadow: 0 0 14px rgba(0, 0, 0, .2);
}

.ms-ba--vertical .ms-ba__line {
	top: calc(var(--ba-line-w) / -2);
	bottom: auto;
	left: 0;
	right: 0;
	width: auto;
	height: var(--ba-line-w);
}

.ms-ba__knob {
	position: absolute;
	left: 0;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ba-knob);
	height: var(--ba-knob);
	box-sizing: border-box;
	border: 2px solid var(--ba-line);
	border-radius: 50%;
	background-color: rgba(255, 253, 249, .95);
	color: #313330;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
	transform: translate(-50%, -50%);
	transition: transform .25s ease;
}

.ms-ba--vertical .ms-ba__knob {
	left: 50%;
	top: 0;
}

/* The two arrows are separate, so "Arrow Spacing" can pull them apart. Their size follows
   the handle size (per style below), the same in both directions. */
.ms-ba__arrows {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: var(--ba-arrow-gap, 0px);
	height: var(--ba-arrow-h, calc(var(--ba-knob) * .56));
}

.ms-ba__arrow {
	flex: none;
	width: auto;
	height: 100%;
	aspect-ratio: 10 / 24;
	fill: currentColor;
}

.ms-ba .ms-ba__arrows--chevron .ms-ba__arrow {
	fill: none;
	stroke: currentColor;
	stroke-width: var(--ba-chevron-w, 1.6);
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Top / bottom: turn the pair as a whole, so ‹ › become up / down arrows. */
.ms-ba--vertical .ms-ba__arrows {
	transform: rotate(90deg);
}

.ms-ba__handle:hover .ms-ba__knob,
.ms-ba.is-dragging .ms-ba__knob {
	transform: translate(-50%, -50%) scale(1.06);
}

.ms-ba__handle:focus-visible .ms-ba__knob {
	outline: 2px solid var(--ba-line);
	outline-offset: 3px;
}

/* Handle styles ------------------------------------------------------------- */

/* Ring: a hairline circle, no fill — the photo shows through. */
.ms-ba--handle-ring .ms-ba__knob {
	border-width: 1px;
	background-color: transparent;
	color: var(--ba-line);
	box-shadow: none;
}

/* Line: just the fine divider with chevrons either side, no knob at all. */
.ms-ba--handle-line {
	--ba-line-w: 1px;
	--ba-chevron-w: 1.3;
	--ba-arrow-gap: 8px; /* the divider runs between the arrows; "Arrow Spacing" overrides it */
}

.ms-ba--handle-line .ms-ba__knob {
	width: var(--ba-knob);
	height: calc(var(--ba-knob) * .5);
	border: 0;
	border-radius: 999px; /* invisible here — only shapes the keyboard focus ring */
	background: none;
	color: var(--ba-line);
	box-shadow: none;
}

.ms-ba--vertical.ms-ba--handle-line .ms-ba__knob {
	width: calc(var(--ba-knob) * .5);
	height: var(--ba-knob);
}

.ms-ba--handle-line .ms-ba__arrows {
	height: var(--ba-arrow-h, calc(var(--ba-knob) * .5));
}

.ms-ba--handle-line .ms-ba__line {
	box-shadow: 0 0 6px rgba(0, 0, 0, .18);
}

/* Ring and Line sit straight on the photo: a soft shadow keeps the arrows readable. */
.ms-ba--handle-ring .ms-ba__knob svg,
.ms-ba--handle-line .ms-ba__knob svg {
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, .45)) drop-shadow(0 1px 4px rgba(0, 0, 0, .25));
}

.ms-ba--handle-ring .ms-ba__knob {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 0 14px rgba(0, 0, 0, .18);
}

/* Pill: a slim capsule along the divider's direction of travel. */
.ms-ba--handle-pill .ms-ba__knob {
	width: calc(var(--ba-knob) * 1.3);
	height: calc(var(--ba-knob) * .6);
	border-width: 1px;
	border-radius: 999px;
}

.ms-ba--vertical.ms-ba--handle-pill .ms-ba__knob {
	width: calc(var(--ba-knob) * .6);
	height: calc(var(--ba-knob) * 1.3);
}

.ms-ba--handle-pill .ms-ba__arrows {
	height: var(--ba-arrow-h, calc(var(--ba-knob) * .44));
}

.ms-ba-frost-yes .ms-ba__knob {
	background-color: rgba(255, 255, 255, .22);
	color: #FFFFFF;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.ms-ba-frost-yes .ms-ba--handle-line .ms-ba__knob {
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Labels */
.ms-ba__label {
	position: absolute;
	z-index: 2;
	padding: 6px 12px;
	border-radius: 999px;
	background-color: rgba(49, 51, 48, .55);
	color: #FFFFFF;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	transition: opacity .3s ease;
}

/* Left / right: labels on the sides, vertical spot from the setting. */
.ms-ba--horizontal .ms-ba__label--before { left: var(--ba-label-offset); }
.ms-ba--horizontal .ms-ba__label--after { right: var(--ba-label-offset); }
.ms-ba--horizontal.ms-ba--labels-start .ms-ba__label { top: var(--ba-label-offset); }
.ms-ba--horizontal.ms-ba--labels-center .ms-ba__label { top: 50%; transform: translateY(-50%); }
.ms-ba--horizontal.ms-ba--labels-end .ms-ba__label { bottom: var(--ba-label-offset); }

/* Top / bottom: labels on top and bottom, horizontal spot from the setting. */
.ms-ba--vertical .ms-ba__label--before { top: var(--ba-label-offset); }
.ms-ba--vertical .ms-ba__label--after { bottom: var(--ba-label-offset); }
.ms-ba--vertical.ms-ba--labels-start .ms-ba__label { left: var(--ba-label-offset); }
.ms-ba--vertical.ms-ba--labels-center .ms-ba__label { left: 50%; transform: translateX(-50%); }
.ms-ba--vertical.ms-ba--labels-end .ms-ba__label { right: var(--ba-label-offset); }

.ms-ba--labels-hover .ms-ba__label { opacity: 0; }
.ms-ba--labels-hover:hover .ms-ba__label,
.ms-ba--labels-hover:focus-within .ms-ba__label { opacity: 1; }

/* A label hides once the divider covers its side. */
.ms-ba.ms-ba.is-before-hidden .ms-ba__label--before,
.ms-ba.ms-ba.is-after-hidden .ms-ba__label--after { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.ms-ba.is-animating { transition: none; }
	.ms-ba__knob,
	.ms-ba__label { transition: none; }
}