@layer theme, base, components, utilities;

@layer components {
	.ml-input--default {
		border-color: var(--border-strong);
		background: var(--surface);
		color: var(--text-primary);
	}

	.ml-input--default:focus-within {
		border-color: var(--accent);
		background: var(--surface-2);
		box-shadow: var(--focus-ring);
	}

	.ml-input:has(:disabled) {
		cursor: not-allowed;
		opacity: 0.48;
	}

	.ml-input--error {
		border-color: var(--destructive);
		background: var(--surface);
		color: var(--text-primary);
	}

	.ml-input--error:focus-within {
		border-color: var(--destructive);
		background: var(--surface-2);
		box-shadow: 0 0 0 3px
			color-mix(in oklch, var(--destructive) 20%, transparent);
	}

	.ml-input input {
		outline: none !important;
		box-shadow: none !important;
	}

	.ml-input input:focus,
	.ml-input input:focus-visible {
		outline: none !important;
		box-shadow: none !important;
	}
}