.wppo-notice {
	padding: 12px 16px;
	border-radius: var(--wppo-radius-sm);
	margin-bottom: 20px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
	font-size: 13.5px;
	line-height: 1.5;
	border-width: 1px;
	border-style: solid;

	&__content {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		flex: 1;

		svg {
			margin-top: 2px;
			flex-shrink: 0;
		}
	}

	&__dismiss {
		background: transparent;
		border: none;
		color: inherit;
		cursor: pointer;
		padding: 2px;
		opacity: 0.5;
		transition: opacity 0.15s ease;
		flex-shrink: 0;
		line-height: 1;
		margin-left: auto;

		&:hover {
			opacity: 1;
		}
	}

	/* When notice has direct icon + text (not using __content) */
	> svg:first-child {
		margin-top: 2px;
		flex-shrink: 0;
	}

	&--error {
		background: var(--wppo-error-bg);
		border-color: var(--wppo-error-border);
		color: var(--wppo-error);
	}

	&--warning {
		background: var(--wppo-warning-bg);
		border-color: var(--wppo-warning-border);
		color: var(--wppo-warning);
	}

	&--success {
		background: var(--wppo-success-bg);
		border-color: var(--wppo-success-border);
		color: var(--wppo-success);
	}

	&--info {
		background: var(--wppo-info-bg);
		border-color: var(--wppo-info-border);
		color: var(--wppo-info);
	}
}