@use "sass:map";
@use "@db-ui/foundations/build/styles/fonts";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/icons";

.db-infotext {
	--db-icon-margin-end: #{variables.$db-spacing-fixed-2xs};

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

	display: flex;

	@include icons.has-no-icon() {
		@include icons.to-filled-icon();
		@include icons.set-icon("information_circle");
	}

	&[data-size="small"] {
		@extend %db-overwrite-font-size-xs;
	}

	&[data-semantic="adaptive"],
	&:not([data-semantic]) {
		color: colors.$db-adaptive-bg-inverted-contrast-high-default;

		&::before {
			--db-icon-color: #{colors.$db-adaptive-on-bg-basic-emphasis-70-default};
		}
	}

	@each $name, $colors in colors.$variant-colors {
		&[data-semantic="#{$name}"] {
			@include icons.variant-icons($name);

			color: var(--db-#{$name}-bg-inverted-contrast-high-default);

			&::before {
				--db-icon-color: var(
					--db-#{$name}-on-bg-basic-emphasis-70-default
				);
			}
		}
	}

	// Workaround for current stencil implementation for form-components
	&:has(> .db-infotext) {
		margin: 0;

		&::before {
			content: none;
		}
	}
}