@use '../../base/functions' as *;

.notification {
	margin: var(--padding-small);
	padding: var(--padding-small);
	display: flex;
	flex-direction: column;
	position: fixed;
	border-width: 0.0625rem;
	border-style: solid;
	border-radius: var(--radius-medium);
	background-color: var(--ui-surface);
	border-color: var(--info);

	// Alternate state colors
	&.notification {
		&-success {
			background-color: var(--ui-surface);
			border-color: var(--success);
		}

		&-warning {
			background-color: var(--ui-surface);
			border-color: var(--warning);
		}

		&-fail {
			background-color: var(--ui-surface);
			border-color: var(--fail);
		}
	}
}