@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/helpers";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/animation";
@use "./component";

%db-link-height {
	display: inline-block;
	block-size: variables.$db-sizing-sm;
}

%db-link-default-color {
	color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;

	@include helpers.hover {
		color: color-mix(
			in srgb,
			transparent 25%,
			#{colors.$db-adaptive-on-bg-basic-emphasis-100-default}
		);
	}

	@include helpers.active {
		color: color-mix(
			in srgb,
			transparent 50%,
			#{colors.$db-adaptive-on-bg-basic-emphasis-100-default}
		);
	}
}

%db-default-link {
	@extend %default-fg-transition;
	@extend %db-link-height;
	@extend %db-link-default-color;

	inline-size: fit-content;

	// Link underline
	// TODO: We should evaluate whether we could move this declaration to the @font-face declarations even already
	text-underline-position: from-font;
	text-decoration-thickness: helpers.px-to-rem($pxValue: 1);
	text-decoration-line: underline;

	&:not([data-variant="inline"]) {
		white-space: nowrap;
	}

	&[data-variant="inline"] {
		display: inline;
	}

	&:focus-visible {
		border-radius: variables.$db-border-radius-xs;
	}

	// "disabled" links
	&[aria-disabled="true"] {
		opacity: component.$default-disabled;
		pointer-events: none;
	}
}