@use "../../abstracts/mixins";

.mai-icon {
	line-height: 0;
	vertical-align: middle;

	@include mixins.clearfix();

	svg {
		position: relative;
		width: 100%;
		max-width: var(--icon-size);
		height: 100%;
		max-height: var(--icon-size);
		color: var(--icon-color);
		filter: drop-shadow(var(--icon-text-shadow, unset));
		fill: currentColor;
	}
}

.mai-icon-wrap {
	display: inline-block;
	width: calc(var(--icon-size) + (var(--icon-padding) * 2));
	height: calc(var(--icon-size) + (var(--icon-padding) * 2));
	margin: var(--icon-margin);
	padding: var(--icon-padding);
	text-align: center;
	background-color: var(--icon-background);
	border: var(--icon-border, unset);
	border-radius: var(--icon-border-radius, unset);
	box-shadow: var(--icon-box-shadow, unset);
}

:root {
	--icon-size: 2rem;
}