@use '../../../../node_modules/sass-basis/src/css/core';

%alert {
	--sme-alert--border-radius: var(--_global--border-radius);
	--sme-alert--padding: var(--_padding1);
	--sme-alert--background-color: transparent;
	--sme-alert--border: 1px solid var(--_lighter-color-gray);
	--sme-alert--color: currentColor;
	--sme-alert--icon: none;
	--sme-alert--icon-size: 24px;

	@include core.alert();
	position: relative;
	background-color: var(--sme-alert--background-color);
	border: var(--sme-alert--border);
	border-radius: var(--sme-alert--border-radius);
	color: var(--sme-alert--color);
	padding-right: var(--sme-alert--padding);
	padding-bottom: var(--sme-alert--padding);
	padding-left: var(--sme-alert--padding);

	@include core.media-max(sm) {
		padding-top: calc(var(--sme-alert--padding) * 2 + var(--sme-alert--icon-size)) !important;
	}

	@include core.media-min(md) {
		padding-top: var(--sme-alert--padding);
		padding-right: var(--sme-alert--padding);
		padding-bottom: var(--sme-alert--padding);
		padding-left: calc(var(--sme-alert--padding) * 2 + var(--sme-alert--icon-size)) !important;
	}

	&::before {
		content: '';
		position: absolute;
		top: var(--_padding1);
		left: 50%;
		transform: translateX(-50%);
		display: block;
		height: var(--sme-alert--icon-size);
		width: var(--sme-alert--icon-size);
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: contain;
		background-image: var(--sme-alert--icon);

		@include core.media-min(md) {
			top: 50%;
			left: var(--_padding1);
			transform: translateY(-50%);
		}
	}
}