@use "@wordpress/base-styles/variables" as *;

.components-notice {
	--wp-components-notice-background-color: var(--wpds-color-background-surface-info-weak);
	--wp-components-notice-border-color: var(--wpds-color-stroke-surface-info);
	--wp-components-notice-text-color: var(--wpds-color-foreground-content-info);

	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	padding: var(--wpds-dimension-padding-md);
	border: var(--wpds-border-width-xs) solid var(--wp-components-notice-border-color);
	border-radius: var(--wpds-border-radius-lg);
	background-color: var(--wp-components-notice-background-color);
	color: var(--wp-components-notice-text-color);
	font-family: var(--wpds-typography-font-family-body);
	font-size: var(--wpds-typography-font-size-md);
	line-height: var(--wpds-typography-line-height-sm);

	&.is-success {
		--wp-components-notice-background-color: var(--wpds-color-background-surface-success-weak);
		--wp-components-notice-border-color: var(--wpds-color-stroke-surface-success);
		--wp-components-notice-text-color: var(--wpds-color-foreground-content-success);
	}

	&.is-warning {
		--wp-components-notice-background-color: var(--wpds-color-background-surface-warning-weak);
		--wp-components-notice-border-color: var(--wpds-color-stroke-surface-warning);
		--wp-components-notice-text-color: var(--wpds-color-foreground-content-warning);
	}

	&.is-error {
		--wp-components-notice-background-color: var(--wpds-color-background-surface-error-weak);
		--wp-components-notice-border-color: var(--wpds-color-stroke-surface-error);
		--wp-components-notice-text-color: var(--wpds-color-foreground-content-error);
	}
}

.components-notice__content {
	grid-column: 1;
	grid-row: 1;

	// Centers single-line copy with the dismiss row when it is present. The same
	// padding is kept when the notice is not dismissible so block height stays
	// consistent across variants, matching `@wordpress/ui` Notice (`.title` /
	// `.description` always use `--text-vertical-padding` whether or not `CloseIcon`
	// is rendered).
	padding-block: calc((var(--wpds-dimension-size-sm) - 1lh) / 2);
}

.components-notice__actions {
	grid-column: 1;
	grid-row: 2;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wpds-dimension-gap-md);
	margin-top: var(--wpds-dimension-gap-sm);
}

.components-notice__dismiss {
	grid-column: 2;
	grid-row: 1;
	color: var(--wpds-color-foreground-interactive-neutral);
	margin-inline-start: var(--wpds-dimension-gap-xs);

	&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover,
	&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):active,
	&:not(:disabled):not([aria-disabled="true"]):focus {
		color: var(--wpds-color-foreground-interactive-neutral-active);
		background-color: transparent;
	}

	&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover {
		box-shadow: none;
	}
}

.components-notice-list {
	display: flex;
	flex-direction: column;
	gap: var(--wpds-dimension-gap-md);

	// The notice should never be wider than the viewport, or the close button might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket.
	max-width: 100vw;
	box-sizing: border-box;
}