@use "@gloria/layout/_mixins.scss" as *;
@use "@gloria/a11y/_mixins.scss" as *;

.c-heading-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	padding: 0.25rem 0.45rem;
	color: var(--color-gray-700);

	@include a11y-keyboard-focus-ring( true, false,
		opacity var(--duration-normal) var(--cbuc-cubic-out),
		color var(--duration-normal) var(--cbuc-cubic-out)
	);

	&.has-tooltip-visible {
		opacity: 1;
	}

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

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

	@include mobile {
		display: none;
	}
}

.b-heading:has(.c-heading-link) {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	position: relative;

	&:hover,
	&:focus-within {
		.c-heading-link {
			opacity: 1;
		}
	}
}
