/* SPDX-License-Identifier: AGPL-3.0-or-later */

.control {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.sliderRow {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
}

.sliderRowMain {
	flex: 1;
	min-width: 0;
}

.sliderResetSlot {
	display: inline-flex;
	width: 1.5rem;
	height: 1.5rem;
	flex: 0 0 1.5rem;
	align-items: center;
	justify-content: center;
}

.resetButton {
	display: inline-flex;
	height: 1.5rem;
	width: 1.5rem;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 0.25rem;
	background-color: transparent;
	color: var(--text-primary-muted);
	cursor: pointer;
	transition:
		background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
		color 150ms cubic-bezier(0.4, 0, 0.2, 1),
		opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.resetButton:enabled:hover {
	background-color: var(--background-modifier-hover);
	color: var(--text-primary);
}

.resetButton:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.resetRow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.resetAccessory {
	color: var(--text-muted);
	font-size: 0.875rem;
	margin-left: auto;
}

@media (max-width: 480px) {
	.resetAccessory {
		flex-basis: 100%;
		margin-left: 0;
	}
}

.slider {
	--slider-control-height: 1.625rem;
	--slider-thumb-size: 1rem;
	--slider-track-size: 0.375rem;
	--slider-mark-space: 1.5rem;
	box-sizing: border-box;
	color: var(--text-secondary, #b9bbbe);
	min-width: 0;
	position: relative;
	width: 100%;
}

.sliderFrame {
	min-width: 0;
	width: 100%;
}

.slider.hasMarks.marksAbove {
	padding-block-start: var(--slider-mark-space);
}

.slider.hasMarks.marksBelow {
	padding-block-end: var(--slider-mark-space);
}

.mini {
	--slider-thumb-size: 0.75rem;
	--slider-track-size: 0.25rem;
	--slider-control-height: 1.25rem;
	--slider-mark-space: 1.375rem;
}

.vertical {
	height: var(--slider-vertical-height, 5rem);
	width: var(--slider-vertical-width, var(--slider-control-height));
}

.slider[data-disabled] {
	opacity: 0.55;
}

.sliderControl {
	align-items: center;
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	height: var(--slider-control-height);
	padding-inline: calc(var(--slider-thumb-size) / 2);
	position: relative;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	width: 100%;
	z-index: 1;
}

.vertical .sliderControl {
	height: 100%;
	justify-content: center;
	padding-block: calc(var(--slider-thumb-size) / 2);
	padding-inline: 0;
	width: 100%;
}

.slider[data-disabled] .sliderControl {
	cursor: not-allowed;
}

.track {
	background-color: color-mix(in srgb, var(--interactive-muted, #dcddde) 82%, var(--background-tertiary, #202225));
	border-radius: 999px;
	box-shadow: inset 0 0 0 0.0625rem color-mix(in srgb, var(--background-primary, #000) 20%, transparent);
	height: var(--slider-track-size);
	position: relative;
	width: 100%;
}

.vertical .track {
	height: 100%;
	width: var(--slider-track-size);
}

.barFill {
	background: linear-gradient(
		90deg,
		var(--brand-primary-foreground, #5865f2),
		color-mix(in srgb, var(--brand-primary-light, #7983f5) 84%, #fff 16%)
	);
	border-radius: inherit;
	box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.12);
	height: 100%;
}

.vertical .barFill {
	background: linear-gradient(
		0deg,
		var(--brand-primary-foreground, #5865f2),
		color-mix(in srgb, var(--brand-primary-light, #7983f5) 84%, #fff 16%)
	);
	width: 100%;
}

:global(.theme-light) .barFill {
	background: linear-gradient(
		90deg,
		var(--brand-primary-foreground, #5865f2),
		color-mix(in srgb, var(--brand-primary-foreground, #5865f2) 72%, #111 28%)
	);
	box-shadow: none;
}

:global(.theme-light) .vertical .barFill {
	background: linear-gradient(
		0deg,
		var(--brand-primary-foreground, #5865f2),
		color-mix(in srgb, var(--brand-primary-foreground, #5865f2) 72%, #111 28%)
	);
}

.grabber {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 246, 248, 0.92)), var(--background-primary, #fff);
	border: 0.125rem solid color-mix(in srgb, var(--background-primary, #fff) 80%, var(--brand-primary, #5865f2));
	border-radius: 999px;
	box-shadow:
		0 0.0625rem 0.125rem rgba(0, 0, 0, 0.22),
		0 0.375rem 0.875rem rgba(0, 0, 0, 0.18);
	box-sizing: border-box;
	cursor: grab;
	display: block;
	height: var(--slider-thumb-size);
	outline: none;
	transition:
		background-color 120ms cubic-bezier(0.4, 0, 0.2, 1),
		border-color 120ms cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 120ms cubic-bezier(0.4, 0, 0.2, 1),
		scale 120ms cubic-bezier(0.4, 0, 0.2, 1);
	width: var(--slider-thumb-size);
}

.grabber::before {
	border-radius: inherit;
	content: '';
	inset: -0.375rem;
	position: absolute;
}

.slider:not([data-disabled]) .sliderControl:hover .grabber {
	border-color: color-mix(in srgb, var(--brand-primary, #5865f2) 62%, var(--background-primary, #fff));
	box-shadow:
		0 0.0625rem 0.125rem rgba(0, 0, 0, 0.22),
		0 0.5rem 1rem rgba(0, 0, 0, 0.22);
}

.slider[data-dragging] .grabber {
	cursor: grabbing;
	scale: 1.06;
}

.slider[data-disabled] .grabber {
	cursor: not-allowed;
}

.marks {
	height: var(--slider-mark-space);
	inset-inline: calc(var(--slider-thumb-size) / 2);
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.marksAbove .marks {
	top: 0;
}

.marksBelow .marks {
	bottom: 0;
}

.mark {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 0.1875rem;
	min-width: 1.5rem;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	user-select: none;
	-webkit-user-select: none;
}

.marksBelow .mark {
	bottom: 0;
	flex-direction: column-reverse;
	top: auto;
}

.markEndpointStart {
	align-items: flex-start;
	transform: translateX(0);
}

.markEndpointEnd {
	align-items: flex-end;
	transform: translateX(-100%);
}

.markValue {
	color: var(--text-secondary, #b9bbbe);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 0.875rem;
	max-width: 4rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.defaultValue .markValue {
	color: var(--accent-success, #3ba55d);
}

.markDash {
	background-color: color-mix(in srgb, var(--interactive-muted, #dcddde) 78%, var(--text-muted, #72767d));
	border-radius: 999px;
	height: 0.5rem;
	width: 0.125rem;
}

.defaultValue .markDash {
	background-color: var(--accent-success, #3ba55d);
}

@media (forced-colors: active) {
	.track {
		background-color: CanvasText;
	}

	.barFill {
		background: Highlight;
	}

	.grabber {
		background: Canvas;
		border-color: CanvasText;
	}
}