@use '../a11y/mixins' as *;

@layer base {
	.b-prose a,
	.b-link {
		color: var(--color-primary-500);
		text-decoration: var(--text-decoration-underline) var(--color-primary-300);
		word-break: break-word;

		@include a11y-keyboard-focus-ring( true, false,
			text-decoration-color var(--duration-ultra-fast) var(--smoothstep),
			color var(--duration-ultra-fast) var(--smoothstep)
		);

		&:hover {
			text-decoration-color: var(--color-primary-500);
		}

		&:focus,
		&:active {
			color: var(--color-primary-600);
			text-decoration-color: var(--color-primary-600);
		}
	}

	.b-reset-link {
		color: inherit;
		text-decoration: none;
	}
}
