@import "@Themes/constants.scss";

.root {
	display: flex;
	padding: var(--spacing-1, 8px);
	align-items: center;
	align-self: flex-start;

	border-radius: var(--alerts-badge-radius, 360px);
	border: 1px solid var(--alerts-badge-border, rgba(0, 0, 0, 0));
	background: var(--alerts-badge-background, #fff);
	box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);

	svg {
		width: 24px;
		height: 24px;
		min-width: 24px;
		min-height: 24px;

		stroke: var(--alerts-badge-contrast-info);
	}

	&.error {
		svg {
			stroke: var(--alerts-badge-contrast-error);
		}
	}

	&.warning {
		svg {
			stroke: var(--alerts-badge-contrast-warning);
		}
	}

	&.success {
		svg {
			stroke: var(--alerts-badge-contrast-success);
		}
	}

	&.neutral {
		svg {
			stroke: var(--alerts-badge-contrast-neutral);
		}
	}
}