@layer theme, base, components, utilities;

@layer components {
	.ml-back-link {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		font-size: var(--text-sm);
		font-weight: 500;
		color: var(--text-muted);
		text-decoration: none;
		transition: color var(--duration-short) var(--ease-out);
	}

	.ml-back-link:hover {
		color: var(--accent);
	}

	.ml-back-link__line {
		display: inline-block;
		inline-size: var(--ml-space-5);
		block-size: var(--border-thin);
		background: currentColor;
		transition: inline-size var(--duration-short) var(--ease-out);
	}

	.ml-back-link:hover .ml-back-link__line {
		inline-size: var(--ml-space-7);
	}
}