//
// Alert
//
.elementor-alert {
	padding: 15px;
	border-inline-start: 5px solid transparent;
	position: relative;
	text-align: start;

	.elementor-alert-title {
		display: block;
		font-weight: bold;
	}

	.elementor-alert-description {
		font-size: 13px;
	}

	button.elementor-alert-dismiss {
		position: absolute;
		inset-inline-end: var(--dismiss-icon-horizontal-position, 10px);
		inset-block-start: var(--dismiss-icon-vertical-position, 10px);
		padding: 3px;
		font-size: var(--dismiss-icon-size, 20px);
		line-height: 1;
		background: transparent;
		color: var(--dismiss-icon-normal-color, inherit);
		border: none;
		cursor: pointer;
	  	transition-duration: var(--dismiss-icon-hover-transition-duration, 0.3s);

		&:hover {
		  	color: var(--dismiss-icon-hover-color, inherit);
		}

	  	svg {
			width: var(--dismiss-icon-size, 20px);
			height: var(--dismiss-icon-size, 20px);
			fill: var(--dismiss-icon-normal-color, currentColor);
		  	transition-duration: var(--dismiss-icon-hover-transition-duration, 0.3s);

			&:hover {
			  	fill: var(--dismiss-icon-hover-color, currentColor);
			}
		}
	}
}

.elementor-alert-info {
	.elementor-alert {
		color: $info-text;
		background-color: $info-bg;
		border-color: $info-border;
	}
}

.elementor-alert-success {
	.elementor-alert {
		color: $success-text;
		background-color: $success-bg;
		border-color: $success-border;
	}
}

.elementor-alert-warning {
	.elementor-alert {
		color: $warning-text;
		background-color: $warning-bg;
		border-color: $warning-border;
	}
}

.elementor-alert-danger {
	.elementor-alert {
		color: $danger-text;
		background-color: $danger-bg;
		border-color: $danger-border;
	}
}

// Responsive mode
@media (max-width: $screen-mobile-max) {

	.elementor-alert {
		padding: 10px;

		button.elementor-alert-dismiss {
			inset-inline-end: 7px;
			inset-block-start: 7px;
		}
	}
}
