@use "../icons";

[data-icon],
[data-icon-before],
[data-icon-after] {
	&:is(span) {
		display: inline-flex;
		vertical-align: baseline;
	}
}

[data-icon],
[data-icon-before] {
	&::before {
		@extend %icon !optional;

		margin-inline-end: icons.$default-icon-margin-end;
	}
}

[data-hide-icon="true"],
[data-hide-icon-before="true"],
[data-icon="none"],
[data-icon-before="none"] {
	&::before {
		content: none;
	}
}

[data-icon-after] {
	&::after {
		@extend %icon !optional;

		@include icons.icon-content(icons.$default-icon-content-after);

		margin-inline-start: icons.$default-icon-margin-start;
	}
}

[data-hide-icon-after="true"],
[data-icon-after="none"] {
	&::after {
		content: none;
	}
}

// Providing a mechanism for text replacements
.is-icon-text-replace {
	&[data-icon],
	&[data-icon-before] {
		@include icons.is-icon-text-replace();
	}

	&[data-icon-after] {
		@include icons.is-icon-text-replace("after");
	}
}