:where([data-o3-brand] a) {
	color: var(--o3-color-use-case-link-text);
	border-bottom-color: var(--o3-color-use-case-link-underline);
	text-decoration-color: var(--o3-color-use-case-link-underline);
	text-decoration-thickness: 2px;
	text-decoration-line: underline;

	&:focus-visible {
		color: var(--o3-color-use-case-link-text-focus);
		border-bottom-color: var(--o3-color-use-case-link-underline-focus);
		text-decoration-color: var(--o3-color-use-case-link-underline-focus);
	}

	&:hover {
		color: var(--o3-color-use-case-link-text-hover);
		border-bottom-color: var(--o3-color-use-case-link-underline-hover);
		text-decoration-color: var(--o3-color-use-case-link-underline-hover);
	}

	&:focus-visible {
		text-decoration: none;
	}

	[data-o3-theme='inverse']&,
	:where([data-o3-theme='inverse']) & {
		color: var(--o3-color-use-case-link-inverse-text);
		border-bottom-color: var(--o3-color-use-case-link-inverse-underline);
		text-decoration-color: var(--o3-color-use-case-link-inverse-underline);
		text-decoration-thickness: 2px;

		&:focus-visible {
			color: var(--o3-color-use-case-link-inverse-text-focus, var(--o3-color-use-case-link-inverse-text-hover));
			border-bottom-color: var(--o3-color-use-case-link-inverse-underline-focus, var(--o3-color-use-case-link-inverse-underline-hover));
			text-decoration-color: var(--o3-color-use-case-link-inverse-underline-focus, var(--o3-color-use-case-link-inverse-underline-hover));
		}

		&:hover {
			color: var(--o3-color-use-case-link-inverse-text-hover);
			border-bottom-color: var(
				--o3-color-use-case-link-inverse-underline-hover
			);
			text-decoration-color: var(
				--o3-color-use-case-link-inverse-underline-hover
			);
		}
	}
}
