@import "@Themes/constants.scss";

.root {
	width: fit-content;
	display: inline-flex;
	padding: var(--spacing-2, 16px);
	align-items: center;
	gap: var(--spacing-lg, 24px);

	border-radius: var(--alerts-radius, 0px);
	border: 1px solid var(--alerts-info-border);
	background: var(--alerts-info-background);

	.content {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-md, 16px);

		.text-container {
			display: flex;
			flex-direction: column;
			gap: var(--spacing-xs);
		}

		.button-container {
			display: flex;
			gap: var(--spacing-md, 16px);
		}
	}

	.icon {
		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 {
		border-color: var(--alerts-error-border);
		background: var(--alerts-error-background);

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

	&.warning {
		border-color: var(--alerts-warning-border);
		background: var(--alerts-warning-background);

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

	&.success {
		border-color: var(--alerts-success-border);
		background: var(--alerts-success-background);

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

	&.neutral {
		border-color: var(--alerts-neutral-border);
		background: var(--alerts-neutral-background);

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

	&.fullwidth {
		width: 100%;
	}
}