@layer theme, base, components, utilities;

@layer components {
	.ml-theme-switcher {
		display: inline-flex;
		align-items: center;
		color: var(--text);
	}

	.ml-theme-switcher__icon {
		display: inline-grid;
		place-items: center;
		color: var(--text-muted);
		font-size: var(--text-2xl);
		line-height: 1;
		transition:
			color var(--duration-micro) var(--ease-out),
			opacity var(--duration-micro) var(--ease-out),
			transform var(--duration-short) var(--ease-out);
	}

	.ml-theme-switcher--mini {
		padding: 0;
	}

	.ml-theme-switcher--mini .ml-theme-switcher__icon {
		color: var(--text);
		font-size: var(--text-base);
	}

	.ml-theme-switcher--mini[data-size="lg"] .ml-theme-switcher__icon {
		font-size: var(--text-xl);
	}

	.ml-theme-switcher--full {
		gap: var(--space-4);
	}

	.ml-theme-switcher--full[data-size="sm"] {
		gap: var(--space-3);
	}

	.ml-theme-switcher--full[data-size="sm"] .ml-theme-switcher__icon {
		font-size: var(--text-xl);
	}

	.ml-theme-switcher--full[data-size="lg"] {
		gap: var(--space-5);
	}

	.ml-theme-switcher--full[data-size="lg"] .ml-theme-switcher__icon {
		font-size: var(--text-3xl);
	}

	.ml-theme-switcher__toggle {
		border-color: var(--primary);
		background: var(--primary);
		transition:
			background-color var(--duration-short) var(--ease-out),
			border-color var(--duration-short) var(--ease-out),
			box-shadow var(--duration-micro) var(--ease-out);
	}

	.ml-theme-switcher__toggle .ml-toggle__thumb {
		background: var(--primary-foreground);
		transition:
			background-color var(--duration-short) var(--ease-out),
			transform var(--duration-short) var(--ease-out-expo);
	}

	.theme-transitioning .ml-theme-switcher__toggle .ml-toggle__thumb {
		transition:
			background-color var(--duration-short) var(--ease-out),
			transform var(--duration-short) var(--ease-out-expo);
	}

	.theme-transitioning,
	.theme-transitioning *,
	.theme-transitioning *::before,
	.theme-transitioning *::after {
		transition:
			background-color var(--duration-short) var(--ease-out),
			border-color var(--duration-short) var(--ease-out),
			color var(--duration-short) var(--ease-out),
			box-shadow var(--duration-short) var(--ease-out) !important;
	}

	:root:not([data-theme="light"]) .ml-theme-switcher__toggle,
	[data-theme="dark"] .ml-theme-switcher__toggle {
		border-color: var(--border-strong);
		background: var(--surface);
	}

	:root:not([data-theme="light"]) .ml-theme-switcher__toggle .ml-toggle__thumb,
	[data-theme="dark"] .ml-theme-switcher__toggle .ml-toggle__thumb {
		background: var(--primary);
	}

	.ml-theme-switcher__toggle[data-state="on"] {
		border-color: var(--accent);
		background: var(--accent-soft);
	}

	.ml-theme-switcher__toggle[data-state="on"] .ml-toggle__thumb {
		background: var(--accent);
	}

	.ml-theme-switcher__toggle:hover:not(:disabled) {
		border-color: var(--accent);
	}

	.ml-theme-switcher__toggle:active:not(:disabled) {
		box-shadow: inset 0 0 0 var(--border-thin)
			color-mix(in oklch, var(--accent) 28%, transparent);
	}

	.ml-theme-switcher--full[data-theme-value="light"]
		.ml-theme-switcher__icon:first-child,
	.ml-theme-switcher--full[data-theme-value="dark"]
		.ml-theme-switcher__icon:last-child {
		color: var(--text);
	}

	.ml-theme-switcher--full[data-theme-value="light"]
		.ml-theme-switcher__icon:last-child,
	.ml-theme-switcher--full[data-theme-value="dark"]
		.ml-theme-switcher__icon:first-child {
		opacity: 0.62;
	}
}