@charset "utf-8";

@use "@db-ui/foundations/build/styles/fonts";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/animation";
@use "@db-ui/foundations/build/styles/helpers";
@use "@db-ui/foundations/build/styles/icons";
@use "@db-ui/foundations/build/styles/colors";
@use "../../styles/internal/link-components";

.db-link {
	@extend %db-default-link;
	@extend %db-overwrite-font-size-md;

	a {
		// Workaround for angular
		@extend %db-link-height;
	}

	&[data-content="internal"] {
		@include icons.set-icon("arrow_right", "after");

		&:not([data-hide-icon-after="true"])::after {
			vertical-align: top;
		}
	}

	&[data-content="external"] {
		@include icons.set-icon("arrow_up_right", "after");
	}

	&[data-content="internal"],
	&[data-content="external"] {
		--db-icon-margin-start: #{variables.$db-spacing-fixed-2xs};

		&::after {
			/* stylelint-disable-next-line db-ui/use-spacings */
			margin-inline-start: var(--db-icon-margin-start);
		}
	}

	// We couldn't extend any existing SCSS placeholders, as this is a special construct
	&[data-variant="brand"] {
		color: colors.$db-brand-bg-inverted-contrast-high-default;

		@include helpers.hover {
			color: #{colors.$db-brand-bg-inverted-contrast-high-hovered};
		}

		@include helpers.active {
			color: #{colors.$db-brand-bg-inverted-contrast-high-pressed};
		}
	}

	&[data-size="small"] {
		--db-icon-margin-start: #{variables.$db-spacing-fixed-3xs};

		@extend %db-overwrite-font-size-sm;
	}
}