@use "sass:math";
@import './variables';

.s-alert {
	display: block;
	font-size: $alert-font-size;
	margin-bottom: $alert-margin;
	padding: $alert-padding;
	position: relative;
	color: var(--theme-text-primary);

	@include has-theme-bg {
		color: map-deep-get($material-dark-theme, 'text', 'primary');
	}

	.s-icon,
	.s-btn {
		color: inherit !important;
	}

	.s-icon {
		align-self: flex-start;
	}

	[slot='icon'] {
		margin-right: $spacer * 4;
	}

	.s-alert__border {
		border-style: solid;
		border-width: $alert-border-width;
		content: '';
		position: absolute;

		&.border-left,
		&.border-right {
			bottom: 0;
			top: 0;
		}

		&.border-bottom,
		&.border-top {
			left: 0;
			right: 0;
		}

		&.border-left {
			border-top-left-radius: inherit;
			border-bottom-left-radius: inherit;
			left: 0;
		}

		&.border-right {
			border-top-right-radius: inherit;
			border-bottom-right-radius: inherit;
			right: 0;
		}

		&.border-top {
			border-top-left-radius: inherit;
			border-top-right-radius: inherit;
			top: 0;
		}

		&.border-bottom {
			border-bottom-left-radius: inherit;
			border-bottom-right-radius: inherit;
			bottom: 0;
		}
	}

	&.dense {
		padding-top: math.div($alert-padding, 2);
		padding-bottom: math.div($alert-padding, 2);

		.s-alert__border {
			border-width: $alert-dense-border-width;
		}
	}

	&.outlined {
		background: transparent;
		border: $alert-outline;
	}

	&.text {
		background: transparent !important;

		&::before {
			background-color: currentColor;
			border-radius: inherit;
			bottom: 0;
			content: '';
			left: 0;
			opacity: 0.12;
			position: absolute;
			pointer-events: none;
			right: 0;
			top: 0;
		}
	}

	&:not(.tile) {
		border-radius: $alert-border-radius;
	}

	&.colored-border {
		@include elevation(2);
	}

	&:not(.colored-border) {
		.s-alert__border {
			opacity: $alert-border-opacity;
		}
	}
}

.s-alert__wrapper {
	align-items: center;
	border-radius: inherit;
	display: flex;
}

.s-alert__content {
	flex: 1 1 auto;
}