//· Mixins ···································································¬

@mixin fontMono {
	font-family: var(--gooey-controller_font-family);
	// font-size: var(--gooey-controller_font-size);
	font-size: calc(var(--gooey-font-size) * 0.85);
	font-variation-settings: 'wght' 400;
	text-align: center;
}

// Scrollable

@mixin scrollbar {
	width: 5px;
	height: 0px;
}

@mixin scrollbarThumb {
	background: var(--gooey-controller_background);
	border: none;
}

@mixin scrollbarTrack {
	background: var(--gooey-folder-header_background);
	border-bottom-right-radius: var(--gooey-radius-sm);
}

@mixin scrollable {
	&::-webkit-scrollbar {
		@include scrollbar;
	}

	&::-moz-scrollbar {
		@include scrollbar;
	}

	&::-webkit-scrollbar-thumb {
		@include scrollbarThumb;
	}

	&::-moz-scrollbar-thumb {
		@include scrollbarThumb;
	}

	&::-webkit-scrollbar-track {
		@include scrollbarTrack;
	}
	&::-moz-scrollbar-track {
		@include scrollbarTrack;
	}
}
//⌟

//· Stacking Context ···································································¬

.gooey-root {
	z-index: 0;
}

.gooey-header {
	z-index: 2;
}

.gooey-toolbar {
	z-index: 3;
}
//⌟

//· Open / Close Animations ··················································¬

.gooey-root,
.gooey-folder {
	.gooey-content,
	.gooey-content-wrapper {
		display: grid;
		grid-template-rows: 1fr;

		animation-name: open;
		animation-duration: 0.25s;
		animation-fill-mode: forwards;
		animation-timing-function: cubic-bezier(0.1, 1, 0.1, 1);
	}
	.gooey-header {
		height: var(--gooey-header_height);
		max-height: var(--gooey-header_height);
	}

	&.closed {
		.gooey-content,
		.gooey-content-wrapper {
			animation-name: close;
			animation-duration: 0.25s;
			animation-fill-mode: forwards;
			animation-timing-function: cubic-bezier(0.05, 1, 0.2, 1);
		}

		.gooey-folder .gooey-header {
			max-height: 0;
		}
	}

	&.instant {
		// animation-duration: 0s !important;
		// transition-duration: 0s !important;

		// .gooey-content-wrapper {
		// 	grid-template-rows: 1fr;
		// 	animation: none;
		// }

		.gooey-folder .gooey-header {
			height: var(--gooey-header_height);
			max-height: var(--gooey-header_height);
		}
	}
}

.gooey-root.closed .gooey-content {
	transition: opacity 0.1s;
	transition-delay: 0.1s;
	opacity: 0 !important;

	&.instant {
		transition: none;
	}
}

.gooey-root,
.gooey-folder {
	&.animating,
	&.closed {
		.gooey-content,
		.gooey-content-wrapper {
			will-change: transform;
			backface-visibility: hidden;
			transform: translateZ(0px);
			overflow: hidden;
			// We need to hide the scrollbar thumb _during_
			// the animation or the browser will jank it up.
			&::-webkit-scrollbar-thumb {
				transition: none !important;
				background: transparent !important;
			}
			@-moz-document url-prefix() {
				& {
					transition: none !important;
					scrollbar-color: transparent transparent;
				}
			}
		}
	}
}

@keyframes reveal {
	from {
		grid-template-rows: 0fr;
	}
	to {
		grid-template-rows: 1fr;
	}
}

// `Gooey.closed` animations

@keyframes open {
	from {
		grid-template-rows: 0fr;
	}
	to {
		grid-template-rows: 1fr;
	}
}

@keyframes close {
	from {
		grid-template-rows: 1fr;
	}
	to {
		grid-template-rows: 0fr;
	}
}

//⌟

//· Gooey Folders ······························································¬

.gooey-folder {
	contain: content;
	height: fit-content;

	&.disabled {
		opacity: 0.8;
		filter: brightness(0.5) contrast(1.3);
		pointer-events: none;

		.gooey-header {
			pointer-events: auto;
		}
	}

	&:not(.gooey-root) {
		position: relative;
	}
}

.gooey-folder .gooey-header {
	contain: strict;
	position: relative;

	display: flex;
	align-items: center;
	gap: 0.5rem;

	width: 100%;
	padding-left: var(--gooey-folder-header_padding-left);

	outline-offset: -1px;
	color: var(--gooey-folder-header-dim_color);
	background: var(--gooey-folder-header_background);
	outline: var(
		--gooey-folder-header_outline,
		1px solid color-mix(in sRGB, var(--gooey-bg-b) 50%, transparent)
	);
	box-shadow: var(--gooey-folder-header_box-shadow, 0 0 0.1rem #000 inset);

	transition: opacity var(--gooey-transition-duration);
	cursor: pointer;

	.gooey-title {
		contain: layout style paint;
		position: relative;
		width: fit-content;

		font-size: calc(var(--gooey-font-size) * 0.9);
		letter-spacing: var(--gooey-folder-header_letter-spacing);

		transition: color var(--gooey-transition-duration);
	}

	.gooey-folder-icon-container {
		contain: strict;
		width: 1.1rem !important;
		height: 1.1rem !important;

		color: var(--gooey-fg-c);
		backface-visibility: hidden;

		.gooey-folder-icon {
			transition: opacity var(--gooey-transition-duration);
			contain: strict;
			backface-visibility: hidden;
		}
	}
}

.gooey-connector-svg {
	contain: layout style;
	display: flex;
	position: absolute;
	top: 0;
	left: 1px;
	width: 20px;
	height: 100%;
	// height: 70%;
	pointer-events: none;
	overflow: visible;
	z-index: 10;
	backface-visibility: hidden;
}

.gooey-folder {
	contain: content;
	.gooey-content {
		contain: content;
		display: flex;
		flex-direction: column;

		width: 100%;
		border-left: var(--gooey-folder-content_padding-left) solid
			var(--gooey-folder-header_background);
	}
}

.gooey-folder-alt {
	box-shadow:
		0px 0px 10px 0px hsl(10deg, 0%, var(--gooey-shadow-lightness)),
		inset;
	background: color-mix(in sRGB, var(--gooey-bg-b) 100%, transparent);

	--gooey-input-container_color: var(--gooey-fg-b);
	--gooey-folder-header_background: color-mix(in sRGB, var(--gooey-bg-a) 75%, transparent);
	--gooey-controller-dim_background: color-mix(in sRGB, var(--gooey-bg-a) 50%, transparent);
	--gooey-controller_background: color-mix(in sRGB, var(--gooey-bg-a) 80%, var(--gooey-bg-b));

	@at-root .gooey-root[mode='light'] & {
		--gooey-folder-header_background: color-mix(
			in sRGB,
			var(--gooey-bg-a) 75%,
			var(--gooey-bg-b)
		);
		--gooey-controller_background: var(--gooey-light-a);
	}
}
//⌟

//· Gooey Root ·································································¬

.gooey-root * {
	box-sizing: border-box;
}

.gooey-root {
	contain: content;

	position: absolute;
	display: flex;
	flex-direction: column;
	inset: 0;

	width: var(--gooey-root_width);
	min-width: var(--gooey-root_min-width);
	max-width: var(--gooey-root_max-width);

	height: fit-content; //- required for animations

	background: var(--gooey-folder_background);
	border-radius: var(--gooey-radius-md);
	filter: var(--gooey-filter);

	font-family: var(--gooey-font-family);
	font-weight: var(--gooey-folder-content_font-weight);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;

	user-select: none;
	-webkit-user-select: none;
	z-index: 99;
}

.gooey-root > .gooey-header {
	contain: strict;
	position: relative;

	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 0.5rem;

	width: 100%;
	min-height: var(--gooey-root-header_height);

	color: var(--gooey-fg-c);
	background: var(--gooey-bg-a);
	border-radius: var(--gooey-radius-md);
	border-bottom-left-radius: var(--gooey-radius-xs);
	border-bottom-right-radius: var(--gooey-radius-xs);

	cursor: pointer;
	cursor: grab;

	.gooey-title {
		contain: layout style paint;
		position: relative;
		width: fit-content;
		height: var(--gooey-root-header_height);

		font-size: var(--gooey-font-size);
		font-variation-settings:
			'wght' var(--gooey-root-header_font-weight),
			'wdth' 100;
		letter-spacing: var(--gooey-root-header_letter-spacing);
		line-height: var(--gooey-root-header_height);

		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

		pointer-events: none;
	}
}

.gooey-root > .gooey-content-wrapper > .gooey-content {
	box-sizing: border-box;

	display: flex;
	flex-direction: column;

	width: 100%;
	margin: 0;
	max-height: var(--gooey-root_max-height);

	border-bottom: 4px solid var(--gooey-bg-a);
	border-radius: var(--gooey-radius-md);
	border-top-left-radius: var(--gooey-radius-sm);
	border-top-right-radius: var(--gooey-radius-sm);
	background: var(--gooey-root-content_background);
	backdrop-filter: var(--gooey-backdrop-filter);
	transform: translateZ(1px);
	-webkit-backdrop-filter: var(--gooey-backdrop-filter);
	outline-offset: -1px;

	box-shadow: 0 0 4.5px 0.5px
		hsla(0, 10%, var(--gooey-shadow-lightness), var(--gooey-shadow-opacity)) inset;

	overflow-y: scroll;
	overflow-x: hidden;

	backface-visibility: hidden;
	scrollbar-gutter: stable;

	@include scrollable;

	@-moz-document url-prefix() {
		& {
			transition: none !important;
			scrollbar-color: var(--gooey-bg-b) var(--gooey-bg-a);
			scrollbar-width: thin;
			scrollbar-gutter: auto;
		}
	}
}

.gooey-root.animating > .gooey-content-wrapper > .gooey-content {
	@-moz-document url-prefix() {
		& {
			overflow: hidden;
		}
	}
}
//⌟

//· Controllers ······························································¬

.gooey-controller,
.gooey-controller-text,
.gooey-controller-switch,
.gooey-controller-button {
	box-sizing: border-box;
	color: var(--gooey-controller-dim_color);
	background: var(--gooey-controller-dim_background);

	&.disabled {
		opacity: 0.75;
		filter: brightness(0.75);
		color: var(--gooey-bg-e);
		pointer-events: none;
	}
}

.gooey-controller-text.disabled {
	color: var(--gooey-controller_color);
	opacity: 0.8;
	filter: brightness(0.8);
}

.gooey-controller {
	contain: layout style;
	width: 100%;

	box-shadow: var(--gooey-controller_box-shadow);
	border-radius: var(--gooey-controller_border-radius);
	outline: var(--gooey-controller_outline);

	transition-duration: var(--gooey-transition-duration);
	transition-property: color, background, opacity;

	&:hover,
	&:focus-visible,
	&:active {
		&:not(:disabled),
		&:not(.disabled) {
			opacity: 1;
			color: var(--gooey-controller_color);
			background: var(--gooey-controller_background);
		}
	}
}

.gooey-controller-button {
	contain: strict;
	cursor: pointer;

	height: 1.5rem;
	margin: 0;
	padding: 0;

	border: none;
	border-radius: var(--gooey-controller_border-radius);
	outline: var(--gooey-controller_outline);
	outline-offset: -1px;
	// prettier-ignore
	box-shadow:
		1px 2px 6px var(--gooey-shadow-color),
		1px -1px 1px hsla(250, 10%, calc(var(--gooey-shadow-lightness)), calc(var(--gooey-shadow-opacity))) inset,
		1px -1px 1px hsla(250, 10%, calc(var(--gooey-shadow-lightness)), calc(var(--gooey-shadow-opacity))) inset,
		-0.5px 0.5px 0.5px hsla(250, 10%, 50%, calc(var(--gooey-shadow-opacity))) inset
	;

	@include fontMono;

	transform: scale(1);
	backface-visibility: hidden;

	transition-duration: var(--gooey-transition-duration);
	transition-property: background, color, transform, box-shadow;

	// @at-root .gooey-root[mode='dark'] & {
	// 	outline: 1px solid color-mix(in sRGB, var(--gooey-bg-a), transparent 50%);
	// 	outline: none;
	// }

	svg {
		width: 100%;
		height: 100%;
	}

	&:not(:disabled),
	&:not(.disabled) {
		&:hover {
			background: var(--gooey-controller_background);
			color: var(--gooey-controller_color);
		}

		&:active {
			transform: scale(0.975);
			color: var(--gooey-theme-a);

			// prettier-ignore
			box-shadow:
				0px 0px 3px var(--gooey-shadow-color),
				0px 0px 5px hsla(250, 10%, calc(var(--gooey-shadow-lightness) / 3), calc(var(--gooey-shadow-opacity) / 1)) inset,
				0px 0px 10px hsla(250, 10%, calc(var(--gooey-shadow-lightness) / 2), calc(var(--gooey-shadow-opacity) / 2)) inset,
				0px 0px 20px hsla(250, 10%, calc(var(--gooey-shadow-lightness) / 1), calc(var(--gooey-shadow-opacity) / 2)) inset
			;
		}
	}

	// Disabled
	&:disabled,
	&.disabled {
		opacity: 0.5;
		cursor: default;
		pointer-events: none;
	}
}

//·· Select ························································¬

.gooey-controller-select-container {
	contain: content;
	position: relative;
	outline: none;
	border: none;

	&[contenteditable='true'] .gooey-controller-select-selected {
		cursor: text;
		outline: 1px solid var(--gooey-theme-a);
	}

	& *::selection {
		background-color: var(--gooey-theme-a);
		color: var(--gooey-bg-b);
	}
}

.gooey-controller-select-selected {
	border-radius: var(--gooey-radius-xs);
	outline: 1px solid color-mix(in sRGB, var(--gooey-bg-d) 0%, transparent);

	text-align: center;
	letter-spacing: var(--gooey-folder-content_letter-spacing);

	overflow: hidden;
	transition-duration: var(--gooey-transition-duration);
	transition-property: background, color, filter;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;

	&.active,
	&:hover,
	&:focus-visible,
	&:active {
		filter: contrast(1.1) brightness(1.25);
	}
}

@keyframes dropdown {
	from {
		transform: translateY(0rem);
	}
	to {
		transform: translateY(0.25rem);
	}
}

.gooey-controller-select-dropdown {
	contain: layout style;
	backface-visibility: hidden;
	display: none;

	position: absolute;
	display: flex;
	flex-direction: column;

	width: 0px;
	height: 0px;
	padding: 0;
	margin: 0;

	background: color-mix(
		in sRGB,
		var(--gooey-folder-header_background) calc(var(--gooey-opacity) / 4 * 100%),
		transparent
	);
	color: var(--gooey-controller-dim_color);
	backdrop-filter: var(--gooey-backdrop-filter);
	-webkit-backdrop-filter: var(--gooey-backdrop-filter);
	outline: 1px solid var(--gooey-bg-b);
	border-radius: var(--gooey-radius);
	box-shadow:
		0px 0.3px 0.3px hsla(var(--gooey-shadow-lightness), 0.49),
		-0.1px 2.1px 2.2px -0.6px hsla(var(--gooey-shadow-lightness), 0.47),
		-0.2px 4.6px 4.9px -1.2px hsla(var(--gooey-shadow-lightness), 0.45),
		-0.4px 9.2px 9.8px -1.7px hsla(var(--gooey-shadow-lightness), 0.42),
		-0.7px 17.4px 18.5px -2.3px hsla(var(--gooey-shadow-lightness), 0.4),
		-1.2px 30.6px 32.6px -2.9px hsla(var(--gooey-shadow-lightness), 0.38);

	z-index: 100;
	transition:
		opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1),
		transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);

	opacity: 0;
	pointer-events: none;
	transform: translate(0, 0) scaleY(0);
	transform-origin: top center;

	overflow-y: auto;

	@include scrollable;

	&.expanded {
		contain: content;
		display: block;
		width: fit-content;
		height: fit-content;
		padding: 0.1rem;
		opacity: 1;
		transform: translate(0, 0.5rem) scaleY(1);
		animation: dropdown 0.15s forwards;
	}
}

.gooey-controller-select-option {
	contain: content;
	padding: 0.1rem 0.75rem;
	line-height: 1.5rem;

	font-family: var(--gooey-font-family, var(--font-d));
	font-size: calc(var(--gooey-font-size) * 0.8);
	letter-spacing: 0.5px;
	color: var(--gooey-fg-d);

	transition-duration: 0.15s;
	transition-property: background, color, filter;

	cursor: pointer;

	&:hover,
	&:focus-visible {
		color: var(--gooey-controller_color);
		background: color-mix(
			in sRGB,
			var(--gooey-controller_background) 50%,
			var(--gooey-folder_background)
		);
	}

	&:first-of-type {
		border-top-left-radius: var(--gooey-radius-sm);
		border-top-right-radius: var(--gooey-radius-sm);
	}

	&:last-of-type {
		border-bottom-left-radius: var(--gooey-radius-sm);
		border-bottom-right-radius: var(--gooey-radius-sm);
	}

	&.selected,
	&:hover {
		color: var(--gooey-fg-a);
	}
}

@at-root .gooey-wrapper[mode='light'] .gooey-controller-select-option {
	&.selected,
	&:hover {
		background: var(--gooey-folder-header_background);
	}
}

//⌟
//⌟

//· Toolbar ···································································¬

.gooey-toolbar {
	contain: content;
	backface-visibility: hidden;

	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;

	width: 75%;

	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;

	pointer-events: none;
}

$icon-width: 1.5rem;
$icon-height: 0.9rem;

.gooey-toolbar-item {
	svg {
		max-height: 1rem;
	}
}

//·· Search ························································¬

//? Search Container

.gooey-search-container {
	contain: content;
	backface-visibility: hidden;

	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.25rem;

	padding: 0.25rem 0.1rem 0.25rem 0;

	cursor: pointer;

	pointer-events: all;
}

//? Search Button

.gooey-header:hover .gooey-search-button {
	opacity: 1;
}

.gooey-search-button {
	contain: strict;
	all: unset;

	display: flex;
	align-items: center;

	width: $icon-width;
	height: $icon-height;

	transition-duration: 0.5s;
	transition-property: color, opacity;

	svg {
		pointer-events: none;

		path {
			transform: translate(0, 0) scale(1);
			transform-origin: 50% 50%;
			transition-duration: 0.15s;
			transition: transform 0.15s;
		}

		circle {
			fill: transparent;
			transform: translate(0, 0) scale(1);
			transition-duration: 0.15s;
			transition: transform 0.15s;
		}
	}
}

//- Search Hover

.gooey-search-button {
	color: var(--gooey-toolbar-icon-dim_color);
	opacity: 0;
}
.gooey-search-button:hover {
	color: var(--gooey-fg-e);
	opacity: 1;

	transition-duration: 0.15s;
}
.gooey-search-button:active {
	transition-duration: 0.05s;

	background: transparent;
	color: var(--gooey-fg-d);
	opacity: 1;

	scale: 0.9;
}

//- Search Active

.gooey-search-container.active .gooey-search-button {
	color: var(--gooey-bg-e);
	opacity: 1;

	path {
		transform: translate(-10%, 10%) scale(0);
		transform-origin: 60% 60%;
	}

	circle {
		fill: var(--gooey-bg-e);
		transform: translate(-10%, 20%) scale(0.75);
	}
}

//? Search Input

input.gooey-search-input {
	contain: content;
	width: 6rem;
	height: 1rem;
	padding: 0 0.25rem;

	color: var(--gooey-fg-c);
	background: var(--gooey-bg-b);
	border-radius: var(--gooey-radius-sm);
	box-shadow: 0 0 11px #0004 inset;
	outline: none;
	border: none;

	font-size: calc(var(--gooey-font-size) * 0.75);
	caret-color: var(--gooey-bg-e);
	caret-shape: block;
	line-height: 4px !important;

	transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);

	@at-root .gooey-root[mode='light'] & {
		box-shadow: 0 0 4px #0001 inset;
	}
}

//- Search Input Active

.gooey-search-input {
	max-width: 0rem;
	opacity: 0;
	pointer-events: none;
	transition-duration: 1s;
}
.gooey-search-container.active .gooey-search-input {
	max-width: 6rem;
	opacity: 1;
	pointer-events: all;
	transition-duration: 0.33s;
}
//⌟

//·· Settings Button ···································································¬

.gooey-settings-button {
	contain: layout style;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.25rem;

	border: none;
	width: 1rem;

	margin: 0;
	padding: 0;
	margin-right: 0.5rem;

	color: var(--gooey-toolbar-icon-dim_color);
	background: none;

	cursor: pointer;
	transition: color 0.15s;

	pointer-events: all;

	&:hover {
		color: var(--gooey-toolbar-icon_color);
	}

	.gear,
	.dot-left,
	.dot-center,
	.dot-right {
		transition-duration: 0.5s;
		transition-timing-function: cubic-bezier(0.16, 0.9, 0, 1.01);
		transition-property: opacity, transform;
		transform-origin: center;
		pointer-events: none;
	}

	.gear {
		transition:
			all 0.5s cubic-bezier(0.16, 0.9, 0, 1.01),
			transform 0.33s cubic-bezier(0, 1.07, 0.48, 1.27);
		opacity: 0;
		transform: scale(1.33) rotate(-180deg);
	}
	&:hover .gear {
		transition: 0.5s cubic-bezier(0.16, 0.9, 0, 1.01);
	}
	&.open .gear {
		transition: 0.33s cubic-bezier(0, 1.07, 0.48, 1.5);
	}
	.dot-left {
		opacity: 1;
		transform: translateX(0);
	}
	.dot-center {
		opacity: 1;
	}
	.dot-right {
		opacity: 1;
		transform: scale(1) translateX(0);
	}

	// ಠ_ಠ
	$x: /*(^_^)⊃✨*/ 36%;

	&:hover,
	&.open {
		.gear {
			opacity: 1;
			transform: scale(1) rotate(0deg);
		}

		.dot-left {
			opacity: 0;
			transform: translateX($x);
		}

		.dot-center {
			// filter: brightness(0.75);
			transform: scale(1.25);
		}

		.dot-right {
			opacity: 0;
			transform: scale(1.2) translateX(-$x);
		}
	}

	&.open {
		.gear {
			opacity: 1;
			transform: scale(1) rotate(58deg);
		}
	}

	&:active {
		background: none;
	}
}

//⌟
//⌟

//· Shared ···································································¬

//·· Copy ··························································¬

.gooey-folder {
	.copy-button {
		contain: content;
		cursor: pointer;

		height: 2rem;
		padding: 10%;

		color: var(--gooey-fg-a);
		background: color-mix(in sRGB, var(--gooey-bg-a) 0%, transparent);
		outline: 1px solid transparent;
		border-radius: 0.2rem;

		transition-property: all, background, color;
		transition-delay: 0s, 1s, 0.75s;
		transition-duration: 0.25s, 0.5s;

		font-size: 0.8rem;
		font-family: var(--gooey-font-family);

		&:not(.active, .outro) {
			&:hover {
				color: var(--gooey-fg-b);
				background: color-mix(in sRGB, var(--gooey-bg-a) 75%, transparent);

				transition-duration: 0.15s, 0.25s;
				transition-delay: 0s;
			}

			&:active,
			&:focus {
				color: var(--gooey-fg-c);
				background: var(--gooey-bg-c);
			}
		}

		&.active,
		&.outro {
			color: var(--gooey-fg-a);
			outline-color: transparent !important;
			background: color-mix(in sRGB, var(--gooey-bg-a) 0%, transparent);
			opacity: 1 !important;

			transition-delay: 0s;
			transition-duration: 0.25s;
		}
	}

	.copy-button-svg-container {
		align-items: center;
		justify-content: center;

		width: 100%;
		height: 100%;

		grid-area: 1/1;

		$dur: 0.33s;
		$bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
		$bounceXtreme: cubic-bezier(0.2, 2, 0.2, 0.85);
		$quintInOut: cubic-bezier(0.86, 0, 0.07, 1);
		$quartInOut: cubic-bezier(0.77, 0, 0.175, 1);
		svg {
			overflow: visible;

			width: 100%;
			height: 100%;

			.front,
			.back,
			.check {
				transform-origin: 50% 50%;
			}

			.front {
				transition-duration: 0.66s !important;
				transition-timing-function: $bounce;

				stroke: currentColor;
			}
			&.active .front {
				transition-timing-function: $bounceXtreme;
				transition-duration: 0.2s;

				transform: scale(2);
				fill: #12a084 !important;
				stroke: #12a084 !important;
			}

			&.outro .front {
				transition-duration: 0.5s !important;
			}

			.back {
				opacity: 1;
				transform: translate(0, 0);
				transition-duration: $dur;
				transition-timing-function: $quartInOut;
			}
			&.active .back {
				opacity: 0;
				transform: translate(15%, 15%);
			}

			&.outro .back {
				transition:
					opacity 0.25s 0.25s,
					transform 1s 0s;
			}

			.check {
				stroke: var(--gooey-light-a);

				opacity: 0;

				transform: scale(0);

				transition: 0.2s $bounce 0s;
			}
			&.active .check {
				opacity: 1;
				transform: scale(1.25);

				transition: 0.3s $bounceXtreme 0.1s;
			}
		}
	}
}
//⌟
//⌟

//· Inputs ···································································¬

.gooey-input-drawer-toggle {
	contain: strict;
	right: 0.5rem;
	top: 0.5rem;

	min-width: 0.33rem;
	height: 75%;

	color: var(--gooey-fg-c);
	background: var(--gooey-drawer-toggle_background);
	transition: background var(--gooey-transition-duration);
	box-shadow: -1px 0 1px 0.5px color-mix(in sRGB, var(--gooey-bg-a) 50%, transparent) inset;

	border-top-right-radius: var(--gooey-radius-sm);
	border-bottom-right-radius: var(--gooey-radius-sm);

	&.has-description {
		background: var(--gooey-bg-b);
		cursor: pointer;
		pointer-events: auto;

		&:hover {
			background: var(--gooey-bg-c);
		}
	}
}

@property --gooey-resetbtn-gradstart {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 0%;
}

@property --gooey-resetbtn-gradend {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 100%;
}

.gooey-input-reset-btn {
	contain: strict;
	--gooey-resetbtn-gradstart: 5%;
	--gooey-resetbtn-gradend: 16%;
	position: absolute;
	right: 5px;
	top: 0;
	bottom: 0;

	width: 20px;
	height: 20px;
	margin: auto 0;

	transform: translateX(0);

	opacity: 0;
	border-radius: 50%;
	color: var(--gooey-fg-c);
	background-image: radial-gradient(
		circle,
		var(--gooey-theme-a) 0%,
		var(--gooey-theme-a) var(--gooey-resetbtn-gradstart),
		transparent var(--gooey-resetbtn-gradend),
		transparent 100%
	);

	cursor: pointer;
	pointer-events: none;

	transition:
		opacity 0.25s cubic-bezier(0.215, 0.61, 0.355, 1),
		--gooey-resetbtn-gradstart 0.25s cubic-bezier(0.215, 0.61, 0.355, 1),
		--gooey-resetbtn-gradend 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);

	&:hover {
		--gooey-resetbtn-gradStart: 37.5%;
		--gooey-resetbtn-gradend: 45%;
	}

	&.dirty {
		opacity: 1;
		pointer-events: all;
	}
}

.gooey-folder.disabled .gooey-input-reset-btn {
	pointer-events: none;
}

.gooey-input-title {
	position: relative;
	contain: content;

	max-width: var(--gooey-input-section-1_width);
	min-width: var(--gooey-input-section-1_width);
	text-wrap: balance;

	padding-left: 4px;
	padding-right: 10px;

	font-size: calc(var(--gooey-font-size) * 0.85);
	letter-spacing: var(--gooey-folder-content_letter-spacing);

	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	transition-duration: var(--gooey-transition-duration);
	transition-property: color;
}

.gooey-input-container {
	position: relative;
	display: flex;
	align-items: center;

	width: 100%;
	height: 0%;
	min-height: var(--gooey-input_height);

	color: var(--gooey-input-container_color);
	outline: var(--gooey-input-container_outline);
	box-shadow: var(--gooey-input-container_box-shadow);

	transition: opacity 0.15s ease-in 0.2s;

	$inverted-border-size: 0.5rem;
	$inverted-border-radius: 0.25rem;
	$inverted-border-radius-bottom: 0.25rem;

	&:first-of-type {
		border-top-left-radius: var(--gooey-radius-sm);
		border-top-right-radius: var(--gooey-radius-sm);

		// top left corner
		&::before {
			content: '';
			position: absolute;
			background-color: transparent;
			bottom: $inverted-border-size * 2;
			width: $inverted-border-size;
			height: $inverted-border-size * 2;
			border-top-left-radius: $inverted-border-radius;
			box-shadow: 0 -#{$inverted-border-size} 0 0 var(--gooey-folder-header_background);

			clip-path: inset(0 0 0 0);
			opacity: 1;
			transition: inherit;
		}
		// top right corner
		&::after {
			content: '';
			position: absolute;
			background-color: transparent;
			right: 0;
			bottom: $inverted-border-size * 2;
			width: $inverted-border-size;
			min-height: $inverted-border-size * 2;
			border-top-right-radius: $inverted-border-radius;
			box-shadow: 0 -#{$inverted-border-size} 0 0 var(--gooey-folder-header_background);

			clip-path: inset(0 0 0 0);
			opacity: 1;
			transition: inherit;
		}
	}

	@at-root .gooey-folder:not(:last-of-type) .gooey-input-container:last-of-type {
		border-bottom-left-radius: var(--gooey-radius-sm);
		border-bottom-right-radius: var(--gooey-radius-sm);

		// bottom left corner
		&::before {
			content: '';
			position: absolute;
			background-color: transparent;
			top: $inverted-border-size * 2;
			height: $inverted-border-size * 2;
			width: $inverted-border-size;
			border-bottom-left-radius: $inverted-border-radius-bottom;
			box-shadow: 0 $inverted-border-size 0 0 var(--gooey-folder-header_background);
			clip-path: inset(0 0 0 0);
		}
		// bottom right corner
		&::after {
			content: '';
			position: absolute;
			background-color: transparent;
			right: 0;
			top: $inverted-border-size * 2;
			height: $inverted-border-size * 2;
			width: $inverted-border-size;
			border-bottom-right-radius: $inverted-border-radius-bottom;
			box-shadow: 0 $inverted-border-size 0 0 var(--gooey-folder-header_background);
			clip-path: inset(0 0 0 0);
		}
	}

	&:hover {
		color: var(--gooey-fg-b);
	}

	// Dim the text when hovering over the reset button to improve tooltip contrast.
	&:hover:has(.gooey-input-reset-btn.dirty:hover) {
		color: var(--gooey-fg-e);
	}

	&:has(input:active),
	&:has(.gooey-controller:active) {
		.gooey-controller-number {
			opacity: 1;
			background: var(--gooey-controller_background);
		}

		.gooey-input-title {
			color: var(--gooey-theme-a);
		}
	}

	&.gooey-search-hit {
		min-height: var(--gooey-input_height);

		.gooey-input-title {
			color: var(--gooey-theme-a);
		}
	}

	&.gooey-search-miss {
		min-height: 0rem;
		overflow: hidden;

		&::after {
			opacity: 0;
			transition: inherit;
		}
		&::before {
			opacity: 0;
			transition: inherit;
		}
	}

	&.expanded {
		.gooey-input-container {
			min-height: unset;
		}
	}

	&.disabled {
		// opacity: 0.8;
		// filter: brightness(0.8) contrast(1.2);

		// backdrop-filter: brightness(0.8) contrast(1.2);

		filter: brightness(0.9) contrast(1.1);
		background: color-mix(in sRGB, var(--gooey-dark-a), transparent 90%);

		pointer-events: none;
	}

	.gooey-input-content {
		contain: layout style;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		width: 100%;
		margin: 0;
		padding-right: 0.5rem;

		//? Number Input

		.gooey-input-number-container {
			contain: content;
			position: relative;

			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 1px;

			width: 100%;
			height: 90%;

			border-radius: var(--gooey-radius-sm);

			.gooey-input-number-buttons-container {
				contain: strict;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				width: 2rem;
				height: 1.5rem;
				margin: 0;
				padding: 0;
				margin-left: 0.1rem;
				margin-right: 0.1rem;

				.gooey-input-number-button {
					contain: strict;
					cursor: pointer;

					display: flex;
					align-items: center;
					justify-content: center;

					width: 90%;
					height: 50%;

					outline: none;
					opacity: 0.5;

					border: none;
					border-radius: var(--gooey-radius-xs);
					box-shadow: none;

					//- ?
					background: transparent;

					transition-duration: var(--gooey-transition-duration);
					transition-property: color, background, box-shadow, opacity;

					svg {
						width: 1rem;
						height: 1rem;

						color: var(--gooey-fg-d);
						opacity: 0.1;

						scale: 1;
						transition-duration: var(--gooey-transition-duration);
						transition-property: color, opacity;

						user-select: none;
						-webkit-user-select: none;
						pointer-events: none;
					}

					&:hover,
					&:active {
						opacity: 1;
						box-shadow: 0px 0px 1px 0px hsl(0, 0%, 0%) inset;
						@at-root .gooey-root[mode='light'] & {
							box-shadow: 0px 0px 1px 0px hsl(0, 0%, 100%) inset;
						}

						svg {
							opacity: 1;
						}
					}

					&:active {
						svg {
							color: var(--gooey-theme-a);
						}
					}
				}

				.gooey-input-number-buttons-increment {
					border-top-left-radius: var(--gooey-radius);
					border-top-right-radius: var(--gooey-radius);
				}
				.gooey-input-number-buttons-decrement {
					border-bottom-left-radius: var(--gooey-radius);
					border-bottom-right-radius: var(--gooey-radius);
				}
			}
		}

		//- Range <input>

		input.gooey-input-number-range {
			contain: layout style size;
			-webkit-appearance: none;
			appearance: none;

			width: 100%;
			height: 0.5rem;

			accent-color: var(--gooey-input-number-range_color);
			background: var(--gooey-input-number-range_background);
			border-radius: var(--gooey-radius-xs);
			box-shadow: var(--gooey-input-number-range_box-shadow);
			outline: var(--gooey-input-number-range_outline);

			opacity: 0.7;
			transition: 0.15s;

			overflow: visible;
			min-width: 1rem;

			&:hover {
				opacity: 1;
			}

			&:active,
			&.active {
				background: color-mix(
					in lch,
					var(--gooey-theme-a),
					var(--gooey-input-number-range_background)
				);

				&::-webkit-slider-thumb {
					background-color: var(--gooey-theme-a);
				}
			}

			@mixin rangeThumb {
				-webkit-appearance: none;
				appearance: none;

				width: 0.5rem;
				height: 1rem;

				background: var(--gooey-input-number-range_color);
				border-radius: var(--gooey-radius-xs);
				border: none;

				transition: 0.15s;

				cursor: pointer;
				z-index: 10;
			}
			&::-webkit-slider-thumb {
				@include rangeThumb;
			}
			&::-moz-range-thumb {
				@include rangeThumb;
			}

			@mixin rangeThumbActive {
				background: var(--gooey-theme-a);
				box-shadow: 0 0 20px var(--gooey-theme-a);
				opacity: 1;
			}
			&:active {
				&::-webkit-slider-thumb {
					@include rangeThumbActive;
				}
				&::-moz-range-thumb {
					@include rangeThumbActive;
				}
			}

			@mixin rangeTrack {
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;

				border-radius: var(--gooey-radius-sm);
				border: none;
				cursor: pointer;
				z-index: 9;
			}
			&::-moz-range-track {
				@include rangeTrack;
			}
			&::-webkit-slider-runnable-track {
				@include rangeTrack;
			}
		}

		//- Text and Number <input>

		.gooey-controller-number,
		.gooey-controller-text {
			-webkit-appearance: textfield;
			-moz-appearance: textfield;
			appearance: textfield;

			width: 100%;
			min-width: 2rem;
			max-width: var(--gooey-input-section-2_width);
			height: 1.25rem;

			border: none;
			outline: var(--gooey-controller_outline);

			@include fontMono;

			transition-duration: var(--gooey-transition-duration);
			transition-property: color, background, box-shadow;
			overflow: visible;

			&::-webkit-inner-spin-button,
			&::-webkit-outer-spin-button {
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				display: none;
			}

			&.dragging {
				outline: 1px solid color-mix(in sRGB, var(--gooey-theme-a) 50%, transparent);
				box-shadow: 0 0 0.75rem color-mix(in sRGB, var(--gooey-theme-a) 33%, transparent);
			}
		}

		//? Text Input

		.gooey-input-text-container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 0.25rem;

			width: 100%;
			height: 100%;
		}

		.gooey-controller-text {
			width: 100%;
			max-width: unset;
			height: 1.25rem;

			border: none;
			outline: var(--gooey-controller_outline);

			@include fontMono;
			text-align: start;
			padding-left: 0.5rem;

			transition: 0.1s;
			overflow: visible;

			&:hover {
				color: var(--gooey-controller_color);
				background: var(--gooey-controller_background);
			}
		}

		//? Color Input

		.gooey-input-color-container {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			gap: 0.25rem;

			width: 100%;
			margin: 0.25rem 0;

			//- Current Color

			.gooey-input-color-current-color-container {
				position: relative;

				.copy-button {
					position: absolute;
					top: -5px;
					right: -7px;

					width: 1.15rem;
					height: 1.15rem;
					padding: 3px;
					background: none !important;

					color: var(--gooey-fg-d);
					filter: brightness(0.75) contrast(0.8);
					backdrop-filter: none;

					opacity: 0;
					z-index: 10;

					svg {
						.back {
							fill: var(--gooey-fg-d);
							stroke: var(--gooey-fg-d);
						}
					}
					&:hover {
						filter: brightness(1) contrast(1);
						backdrop-filter: none;
						color: var(--gooey-fg-a);
						svg {
							.back {
								fill: var(--gooey-fg-a);
								stroke: var(--gooey-fg-a);
							}
						}
					}
				}

				&:hover {
					.copy-button {
						opacity: 1;
					}
				}
			}

			.gooey-input-color-current-color-background {
				$size: 8px;
				$size2: $size * 2;
				$color: var(--gooey-bg-a);

				width: var(--gooey-input-section-2_width);
				min-width: var(--gooey-input-section-2_width);
				height: 1.5rem;

				background-image: linear-gradient(45deg, $color 25%, transparent 25%),
					linear-gradient(-45deg, $color 25%, transparent 25%),
					linear-gradient(45deg, transparent 75%, $color 75%),
					linear-gradient(-45deg, transparent 75%, $color 75%);
				background-size: $size2 $size2;
				background-position:
					0 0,
					0 $size,
					$size (-$size),
					(-$size) 0px;
				border-radius: var(--gooey-radius-sm);
				overflow: hidden;

				cursor: pointer;

				clip-path: xywh(0 12% 100% 72% round var(--gooey-radius-sm));
				// Safari bug fix
				backface-visibility: hidden;
			}

			.gooey-input-color-current-color-display {
				height: 100%;
			}

			//? Body

			.gooey-input-color-body {
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				// gap: 0.5rem;

				min-width: 0;
				width: var(--gooey-input-section-3_width);

				//- Canvas

				.gooey-input-color-picker-container {
					position: relative;
					display: flex;
					flex-direction: column;
					// gap: 0.25rem;

					.gooey-input-color-picker-canvas {
						display: flex;

						width: 100%;
						height: 3rem;

						border-radius: var(--gooey-radius);

						cursor: pointer;
						overflow: hidden;
					}

					.gooey-input-color-picker-handle {
						position: absolute;
						top: 0;
						left: 0;

						width: 0.5rem;
						height: 0.5rem;
						translate: -50% -50%;

						border-radius: 50%;
						border: 1px solid var(--gooey-fg-a);
						box-shadow: 0 0 0.25rem 0rem var(--gooey-bg-d);
						opacity: 0;

						transition-property: all, opacity;
						transition-delay: 0s, 0s;
						transition-duration: 0.2s, 0.33s;
						transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

						pointer-events: none;
					}

					&.expanded {
						.gooey-input-color-picker-handle {
							opacity: 1;
							transition-delay: 0s, 0.25s;
						}
					}

					//- Hue Slider

					@mixin rangeThumb {
						appearance: none;

						width: 0.25rem;
						height: 0.5rem;
						padding: 0;

						background-color: var(--gooey-input-number-range_color);
						border: none;

						transition: 0.15s;

						cursor: pointer;
						z-index: 10;
					}

					.gooey-input-color-picker-hue {
						appearance: none;

						width: 99%;
						border-radius: var(--gooey-radius-sm);
						background: none;
						height: 0.5rem;

						&::-webkit-slider-thumb {
							@include rangeThumb;
						}
						&::-moz-range-thumb {
							@include rangeThumb;
						}

						@mixin rangeTrack {
							appearance: none;

							background: linear-gradient(
								to right,
								hsl(0, 100%, 50%),
								hsl(60, 100%, 50%),
								hsl(120, 100%, 50%),
								hsl(180, 100%, 50%),
								hsl(240, 100%, 50%),
								hsl(300, 100%, 50%),
								hsl(360, 100%, 50%)
							);

							border-radius: var(--gooey-radius-sm);
							border: none;
							cursor: pointer;
							z-index: 1;
							background-color: none;
						}
						&::-webkit-slider-runnable-track {
							@include rangeTrack;
						}
						&::-moz-range-track {
							@include rangeTrack;
						}
					}

					//- Alpha Slider

					.gooey-input-color-picker-alpha {
						appearance: none;

						width: 99%;
						border-radius: var(--gooey-radius-sm);
						background-color: transparent;

						&::-webkit-slider-thumb {
							@include rangeThumb;
						}
						&::-moz-range-thumb {
							@include rangeThumb;
						}

						&::-webkit-slider-runnable-track {
							appearance: none;

							background: linear-gradient(to right, transparent, currentColor);

							border-radius: var(--gooey-radius-sm);
							border: none;
							cursor: pointer;
							z-index: 1;
						}
						&::-moz-range-track {
							appearance: none;

							background: linear-gradient(to right, transparent, currentColor);

							border-radius: var(--gooey-radius-sm);
							border: none;
							cursor: pointer;
							z-index: 1;
						}
					}
				}

				//- RGB Components

				$selectWidth: 2.5rem;

				.gooey-input-color-components-container {
					display: grid;
					grid-template-columns: $selectWidth 1fr;
					align-items: center;
					gap: 0.25rem;

					.gooey-input-color-components-select-container {
						width: $selectWidth;
						height: 100%;
						grid-area: 1/1;

						color: var(--gooey-fg-d);
						font-size: var(--gooey-font-size);
						line-height: 1.5;

						transition: 0.15s;
						border-radius: var(--gooey-radius-sm);
						overflow: hidden;

						@at-root .gooey-root[mode='light'] & {
							color: var(--gooey-bg-e);
						}

						span {
							transition: 0.4s;
							text-shadow: 0 0 0 transparent;
						}

						.gooey-controller-select-selected {
							font-size: calc(var(--gooey-font-size) * 0.8);
						}

						&:hover {
							outline: 1px solid var(--gooey-bg-d);
						}
					}

					&:has(input.a.hovering) {
						.gooey-input-color-components-select-container span.a {
							color: var(--gooey-fg-a);
						}
					}
					&:has(input.a.dragging) {
						.gooey-input-color-components-select-container span.a {
							color: var(--gooey-theme-a);
							text-shadow: 0 0 0.5rem var(--gooey-theme-a);
						}
					}

					&:has(input.b.hovering) {
						.gooey-input-color-components-select-container span.b {
							color: var(--gooey-fg-a);
						}
					}
					&:has(input.b.dragging) {
						.gooey-input-color-components-select-container span.b {
							color: var(--gooey-theme-a);
							text-shadow: 0 0 0.5rem var(--gooey-theme-a);
						}
					}

					&:has(input.c.hovering) {
						.gooey-input-color-components-select-container span.c {
							color: var(--gooey-fg-a);
						}
					}
					&:has(input.c.dragging) {
						.gooey-input-color-components-select-container span.c {
							color: var(--gooey-theme-a);
							text-shadow: 0 0 0.5rem var(--gooey-theme-a);
						}
					}

					&:has(input.d.hovering) {
						.gooey-input-color-components-select-container span.d {
							color: var(--gooey-fg-a);
						}
					}
					&:has(input.d.dragging) {
						.gooey-input-color-components-select-container span.d {
							color: var(--gooey-theme-a);
							text-shadow: 0 0 0.5rem var(--gooey-theme-a);
						}
					}

					.gooey-input-color-components-text {
						width: 100%;
						max-width: 11rem;
						grid-area: 1/2;

						opacity: 0;
						transform: translateX(-0.5rem);
						pointer-events: none;
						&.visible {
							opacity: 1;
							transform: translateX(0);
							pointer-events: all;
						}
					}

					.gooey-input-color-components-numbers-container {
						grid-area: 1/2;
						display: flex;
						align-items: center;
						justify-content: space-between;
						gap: 0.25rem;

						width: 100%;
						// max-width: 100%;

						.gooey-controller-number {
							height: 1.25rem;

							min-width: unset;
							max-width: 100%;
							display: flex;

							transition: 0.15s;

							overflow: visible;

							opacity: 0;
							transform: translateX(-0.5rem);
							pointer-events: none;
							&.visible {
								opacity: 1;
								transform: translateX(0);
								pointer-events: all;
							}
						}
					}
				}
			}
		}

		//? Button Input

		.gooey-input-button-container {
			display: flex;
			align-items: center;
			justify-content: center;

			width: 100%;
			height: 100%;
		}

		//? Switch Input
		.gooey-input-switch-container {
			position: relative;

			display: flex;
			align-items: center;
			justify-content: flex-start;
			gap: 0.5rem;

			width: 100%;
			height: 100%;
			height: var(--gooey-input_height);

			// border-radius: unset;

			$w: var(--gooey-input-section-1_width);
			// $w: 8rem;
			$tw: 1.5rem;

			.gooey-controller-switch {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;

				height: 66%;
				width: calc($w * 0.6);
				margin: 0;
				padding: 0;

				border-radius: var(--gooey-radius-sm);
				overflow: hidden;
				border: none;
				outline: none;

				transition-duration: 0.25s;
				transition-timing-function: cubic-bezier(0.01, 1.06, 0.8, 1.01);

				box-shadow:
					-1px 1px 7px 0px hsla(250, 10%, var(--gooey-shadow-lightness), 0.33) inset,
					-1px 1px 1px 0px hsla(250, 10%, var(--gooey-shadow-lightness), 0.5) inset;

				background: var(--gooey-input-number-range_background);
				--background-dark: radial-gradient(
					circle at 25% 50% in lab,
					var(--gooey-theme-a) 0%,
					color-mix(in sRGB, var(--gooey-theme-a) 50%, transparent) 3%,
					color-mix(in sRGB, var(--gooey-theme-a) 20%, transparent) 10%,
					color-mix(in sRGB, var(--gooey-theme-a) 15%, transparent) 20%,
					color-mix(in sRGB, var(--gooey-theme-a) 10%, transparent) 30%,
					color-mix(in sRGB, var(--gooey-theme-a) 10%, transparent) 50%,
					var(--gooey-input-number-range_background) 100%
				);
				--background-light: radial-gradient(
					circle at 25% 50% in lab,
					var(--gooey-theme-a) 3%,
					color-mix(in sRGB, var(--gooey-theme-a) 40%, transparent) 3%,
					color-mix(in sRGB, var(--gooey-theme-a) 30%, transparent) 10%,
					color-mix(in sRGB, var(--gooey-theme-a) 20%, transparent) 20%,
					color-mix(in sRGB, var(--gooey-theme-a) 10%, transparent) 30%,
					color-mix(in sRGB, var(--gooey-theme-a) 5%, transparent) 50%,
					var(--gooey-input-number-range_background) 100%
				);
				background-image: var(--background-dark);

				opacity: 0.88;

				cursor: pointer;

				@at-root .gooey-root[mode='light'] & {
					background-image: var(--background-light);
				}

				.gooey-controller-switch-thumb,
				.gooey-controller-switch-left,
				.gooey-controller-switch-right {
					transition-duration: 0.25s;
					transition-timing-function: cubic-bezier(0.01, 1.06, 0.8, 1.01);
				}

				//? Thumb
				.gooey-controller-switch-thumb {
					display: flex;
					position: absolute;
					right: 0.25rem;

					width: $tw;
					min-height: 66%;

					background: var(--gooey-controller_background);
					border: 1px solid var(--gooey-input-dim_color);
					border-radius: var(--gooey-radius-xs);

					box-sizing: border-box;
					overflow: hidden;
					z-index: 2;
				}

				@at-root .gooey-root[mode='light'] & {
					box-shadow:
						-1px 1px 7px 0px #0002 inset,
						-1px 1px 1px 0px #0002 inset;
				}

				//- Positioning
				.gooey-controller-switch-thumb {
					right: calc(100% - $tw - 0.25rem);
				}
				&.active {
					.gooey-controller-switch-thumb {
						right: 10%;
						box-shadow:
							-2px 0px #00000069,
							-2px 0px color-mix(in sRGB, var(--gooey-theme-a) 10%, transparent),
							1px -1px 1px #0002 inset;

						@at-root .gooey-root[mode='light'] & {
							box-shadow:
								-2px 0px #a6a7ad69,
								1px -1px 1px #0002 inset;
						}
					}
				}

				&:hover,
				&:focus-visible {
					&:not(:disabled),
					&:not(.disabled) {
						color: var(--gooey-controller_color);
					}
				}

				&:hover {
					opacity: 1;
				}

				&:after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;

					width: 100%;
					height: 100%;

					background: var(--gooey-input-number-range_background);
					--shadow-light: -1px 1px 7px 0px #0002 inset, -1px 1px 1px 0px #0002 inset;
					--shadow-dark: -1px 1px 7px 0px #000c inset, -1px 1px 1px 0px #000c inset;
					box-shadow: light-dark(var(--shadow-light), var(--shadow-dark));

					opacity: 1;
					transition: 0.33s;

					// @at-root .gooey-root[mode='light'] & {
					// 	box-shadow:
					// 		-1px 1px 7px 0px #0002 inset,
					// 		-1px 1px 1px 0px #0002 inset;
					// }
				}

				&.active:after {
					opacity: 0;
				}
			}
		}
	}

	&:has(.gooey-input-buttongrid-container) {
		height: unset;
	}

	.gooey-input-content {
		//? ButtonGrid Input
		.gooey-input-buttongrid-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			$gap: 0.2rem 2rem;
			gap: $gap;

			width: 100%;
			padding: 0.25rem 0;

			.gooey-controller-buttongrid-row {
				display: flex;
				gap: $gap;

				width: 100%;
			}

			.gooey-controller-buttongrid-button {
				&.active {
					background: var(--gooey-controller_background);
					color: var(--gooey-controller_color);
					color: var(--gooey-theme-a);

					// font-variation-settings: 'wght' 800;
				}
				@at-root .gooey-root[mode='light'] & {
					background: var(--gooey-controller-dim_background);
					color: var(--gooey-controller_color);
					&.active {
						color: var(--gooey-theme-a);
						background: var(--gooey-controller_background);
					}
				}
			}
		}
	}

	//* Accents for when an input's content section is hovered over.

	&:hover {
		.gooey-controller-number {
			background: var(--gooey-controller_background);
		}

		.gooey-input-number-container {
			.gooey-input-number-buttons-container {
				.gooey-input-number-button {
					svg {
						opacity: 0.75;
					}
				}
			}
		}

		.gooey-controller-number {
			color: var(--gooey-fg-b);
		}

		input.gooey-input-number-range::-webkit-slider-thumb {
			background-color: var(--gooey-bg-d);
			transition: 0.15s;
			opacity: 1;

			// &:active, &.active {
			// 	background-color: var(--gooey-theme-a);
			// }
		}
	}

	.gooey-input-content {
		//
		//? Select Input

		.gooey-input-select-container {
			contain: content;
			width: 100%;
			height: 100%;

			font-size: calc(var(--gooey-font-size) * 0.8);

			.gooey-controller-select-selected {
				line-height: 1.25rem;
				height: 1.25rem;
				box-sizing: content-box;

				background: var(--gooey-controller-dim_background);

				border-width: 1px;
				border-style: solid;
				border-color: transparent;

				filter: unset;

				//? chevron icon
				&::before {
					content: '\276F';
					position: absolute;
					top: 0.1rem;
					right: 0.5rem;

					margin: auto;

					color: var(--gooey-bg-d);
					transform: rotate(90deg) translateX(0);

					transition-duration: var(--gooey-transition-duration);
					transition-property: color, transform, border-color;
				}

				&.active,
				&:hover,
				&:focus-visible,
				&:active {
					background: var(--gooey-controller_background);
					&[contenteditable='true'] {
						border-color: var(--gooey-controller-dim_color);
					}
					&::before {
						color: var(--gooey-bg-e);
					}
				}
				&.active {
					&::before {
						color: var(--gooey-fg-d);
						transform: rotate(90deg) translateX(2px);
					}
				}
				&[contenteditable='true'] {
					cursor: text;
					&:focus-visible,
					&:active {
						border-color: var(--gooey-theme-a);
					}
				}
			}
		}
	}
}

//⌟
