@use "sass:map";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/fonts";
@use "../../styles/internal/button-components";
@use "../../styles/internal/tag-components";
@use "../../styles/internal/component";

%absolute-badge {
	position: absolute;
	transform: translate(var(--badge-transform-x), var(--badge-transform-y));

	&[data-placement$="right"] {
		--badge-transform-x: 50%;

		inset-inline-end: 0;
	}

	&[data-placement$="left"] {
		--badge-transform-x: -50%;

		inset-inline-start: 0;
	}

	&[data-placement*="top"] {
		--badge-transform-y: -50%;

		inset-block-start: 0;
	}

	&[data-placement*="center"] {
		--badge-transform-y: -50%;

		inset-block-start: 50%;
	}

	&[data-placement*="bottom"] {
		--badge-transform-y: 50%;

		inset-block-end: 0;
	}
}

.db-badge {
	--badge-size: #{variables.$db-spacing-fixed-xs};

	@extend %component-border;
	@extend %db-overwrite-font-size-2xs;
	@extend %default-button;

	@include tag-components.get-tag-colors();

	border-radius: variables.$db-border-radius-full;
	padding-inline: variables.$db-spacing-fixed-2xs;
	block-size: fit-content;
	inline-size: fit-content;

	&:has(.db-icon) {
		padding: variables.$db-spacing-fixed-3xs;
	}

	> *,
	.db-icon {
		@extend %db-overwrite-font-size-2xs;
	}

	&[data-size="medium"] {
		--badge-size: #{variables.$db-spacing-fixed-sm};

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

		padding-inline: variables.$db-spacing-fixed-xs;

		&:has(.db-icon) {
			padding: variables.$db-spacing-fixed-2xs;
		}

		> *,
		.db-icon {
			@extend %db-overwrite-font-size-sm;
		}
	}

	&:empty,
	> span:empty {
		block-size: var(--badge-size);
		inline-size: var(--badge-size);
		padding: 0;
	}

	&[data-placement^="corner"] {
		@extend %absolute-badge;

		&[data-label] {
			&::before {
				content: attr(data-label);
				position: fixed;
				font-size: 0;
			}
		}
	}
}

// Global styles

[data-has-badge="true"] {
	position: relative;
}