@layer theme, base, components, utilities;

@layer components {
	/* --- Package component interaction primitives --- */
	.ml-button-icon {
		display: inline-grid;
		flex: 0 0 auto;
		inline-size: 1em;
		block-size: 1em;
		place-items: center;
		overflow: visible;
		line-height: 1;
		transition:
			inline-size var(--duration-fast) var(--ease-out),
			margin var(--duration-fast) var(--ease-out),
			opacity var(--duration-micro) var(--ease-out),
			transform var(--duration-fast) var(--ease-out);
	}

	.ml-button-icon__glyph {
		display: inline-block;
		opacity: 1;
		transform: translate3d(0, 0, 0);
		transition:
			opacity var(--duration-micro) var(--ease-out),
			transform var(--duration-fast) var(--ease-out);
	}

	.ml-button-icon__glyph > svg,
	.ml-button-icon__glyph > img {
		display: block;
		inline-size: 100%;
		block-size: 100%;
	}

	.ml-button-icon[data-reveal="true"] {
		inline-size: 0;
		overflow: hidden;
		opacity: 0;
		pointer-events: none;
	}

	.ml-button-icon[data-reveal="true"][data-side="right"],
	.ml-button-icon[data-reveal="true"]:not([data-side="left"]) {
		margin-inline-start: calc(-1 * var(--ml-btn-gap, var(--ml-space-2)));
	}

	.ml-button-icon[data-reveal="true"][data-side="left"] {
		margin-inline-end: calc(-1 * var(--ml-btn-gap, var(--ml-space-2)));
	}

	.ml-button-icon[data-reveal="true"] .ml-button-icon__glyph {
		opacity: 0;
		transform: translate3d(-0.25em, 0, 0);
	}

	.ml-button-icon[data-reveal="true"][data-side="left"] .ml-button-icon__glyph {
		transform: translate3d(0.25em, 0, 0);
	}

	.group\/btn {
		--ml-btn-gap: var(--ml-space-2);
		cursor: pointer;
		text-decoration: none;
	}

	.group\/btn[data-size="sm"] {
		--ml-btn-gap: var(--ml-space-1-5);
	}

	.ml-button-spinner {
		display: inline-block;
		flex: 0 0 auto;
		border: var(--border-thin) solid currentcolor;
		border-block-start-color: transparent;
		border-radius: var(--radius-pill);
		animation: spin 650ms linear infinite;
	}

	/* Button variant colours - kept in plain CSS (not Tailwind @layer utilities)
	   so they always win and always reference live CSS custom properties */
	.ml-btn--primary {
		border-color: var(--primary, currentColor);
		background: var(--primary, currentColor);
		color: var(--primary-foreground, canvas);
	}
	.ml-btn--primary:not(:disabled):not([aria-disabled="true"]):not(
			[data-disabled="true"]
		):not([data-loading="true"]):hover {
		background: var(--btn-primary-hover, currentColor);
	}
	.ml-btn--primary:not(:disabled):not([aria-disabled="true"]):not(
			[data-disabled="true"]
		):not([data-loading="true"]):active {
		border-color: color-mix(
			in oklch,
			var(--btn-primary-hover, currentColor) 88%,
			var(--primary-foreground, canvas)
		);
		background: color-mix(
			in oklch,
			var(--btn-primary-hover, currentColor) 88%,
			var(--primary-foreground, canvas)
		);
	}
	.ml-btn--primary[data-loading="true"] {
		border-color: color-mix(
			in oklch,
			var(--primary, currentColor) 92%,
			var(--background, canvas)
		);
		background: color-mix(
			in oklch,
			var(--primary, currentColor) 92%,
			var(--background, canvas)
		);
		color: color-mix(
			in oklch,
			var(--primary-foreground, canvas) 88%,
			var(--primary, currentColor)
		);
	}

	.ml-btn--secondary {
		border-color: var(--border-strong, currentColor);
		background: var(--button);
		color: var(--primary, currentColor);
	}
	.ml-btn--secondary:not(:disabled):not([aria-disabled="true"]):not(
			[data-disabled="true"]
		):not([data-loading="true"]):hover {
		border-color: color-mix(
			in oklch,
			var(--primary, currentColor) 35%,
			transparent
		);
		background: var(--button-hover);
	}
	.ml-btn--secondary:not(:disabled):not([aria-disabled="true"]):not(
			[data-disabled="true"]
		):not([data-loading="true"]):active {
		border-color: color-mix(
			in oklch,
			var(--primary, currentColor) 48%,
			transparent
		);
		background: color-mix(
			in oklch,
			var(--button-hover) 82%,
			var(--primary, currentColor)
		);
	}
	.ml-btn--secondary[data-loading="true"] {
		border-color: color-mix(
			in oklch,
			var(--border-strong, currentColor) 85%,
			var(--primary, currentColor)
		);
		background: color-mix(in oklch, var(--button) 86%, var(--button-hover));
		color: color-mix(
			in oklch,
			var(--primary, currentColor) 76%,
			var(--text-muted, currentColor)
		);
	}

	.ml-btn--ghost {
		border-color: transparent;
		background: transparent;
		color: var(--text-body, currentColor);
	}
	.ml-btn--ghost:not(:disabled):not([aria-disabled="true"]):not(
			[data-disabled="true"]
		):not([data-loading="true"]):hover {
		background: var(--button-hover);
		color: var(--primary, currentColor);
	}
	.ml-btn--ghost:not(:disabled):not([aria-disabled="true"]):not(
			[data-disabled="true"]
		):not([data-loading="true"]):active {
		background: color-mix(
			in oklch,
			var(--button-hover) 82%,
			var(--primary, currentColor)
		);
		color: var(--primary, currentColor);
	}
	.ml-btn--ghost[data-loading="true"] {
		border-color: transparent;
		background: color-mix(in oklch, var(--button-hover) 42%, transparent);
		color: color-mix(
			in oklch,
			var(--text-body, currentColor) 72%,
			var(--text-muted, currentColor)
		);
	}

	.ml-btn--primary[data-disabled="true"],
	.ml-btn--secondary[data-disabled="true"],
	.ml-btn--ghost[data-disabled="true"] {
		border-color: var(--border);
		background: color-mix(in oklch, var(--button) 55%, transparent);
		color: var(--text-muted);
		opacity: 0.48;
	}

	.ml-btn--ghost[data-disabled="true"] {
		background: transparent;
	}

	.group\/btn:not(:disabled):not([aria-disabled="true"]):not(
			[data-disabled="true"]
		):not([data-loading="true"]):hover
		.ml-button-icon[data-reveal="true"] {
		inline-size: 1em;
		overflow: visible;
		opacity: 1;
		margin: 0;
		transform: translate3d(0, 0, 0);
	}

	.group\/btn:not(:disabled):not([aria-disabled="true"]):not(
			[data-disabled="true"]
		):not([data-loading="true"]):hover
		.ml-button-icon[data-reveal="true"]
		.ml-button-icon__glyph {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}