@use "../common/mixins" as *;
@use "../common/variables" as *;

.urlslab-notifications-panel[class] {
	position: relative;
	width: 30.8em;
	padding: 1.5em 2em;
	margin: 0.77em 0 0;
	font-size: 0.8125rem;
	background-color: rgba($white, 0.6);
	border-radius: $br-6;
	overflow: hidden;
	backdrop-filter: blur(5px);
	filter: drop-shadow(0 4px 12px rgba(111, 111, 111, 0.4));

	// override default wp styles from common.css, ie. for div.error
	border-width: 0;

	&::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 0.77em;
		height: 100%;
	}

	&.dark {
		background-color: rgba($black, 0.8);
		color: $white;
	}

	&.info[class] {

		&::before {
			background-color: $primary-color;
		}
	}

	&.success[class] {

		&::before {
			background-color: $saturated-green;
		}
	}

	&.error[class] {

		&::before {
			background-color: $saturated-red;
		}
	}

	&.wide {
		min-width: 25em;
	}

	.message {
		text-align: left;

		+ .message {
			margin-top: 1em;
		}
	}
}