.wcpay-banner-notice {
	display: flex;
	font-family: $default-font;
	font-size: $default-font-size;
	background-color: $white;
	border-left: $gap-smallest solid $components-color-accent;
	fill: $components-color-accent;
	margin: $gap-large 0;
	padding: $gap-small;
	box-shadow: 0 2px 6px 0 rgba( 0, 0, 0, 0.05 );

	&.is-success {
		border-left-color: $alert-green;
		fill: $alert-green;
	}

	&.is-warning {
		border-left-color: $alert-yellow;
		fill: $alert-yellow;
	}

	&.is-error {
		border-left-color: $alert-red;
		fill: $alert-red;
	}

	&.is-warning &__icon,
	&.is-error &__icon {
		height: 21px; // Adjust gridicon height to match other icons
	}

	&__icon {
		flex-shrink: 0;
		margin-right: $gap-small;
		margin-left: -2px;
	}

	&__content {
		flex-grow: 1;
	}

	&__actions {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: max-content;
		column-gap: $gap-small;
		margin-top: $gap-small;
	}

	&__dismiss.components-button.has-icon {
		flex-shrink: 0;
		padding: 0;
		min-width: 24px;
		height: 24px;

		svg {
			width: 20px;
		}
	}

	/* Margin exceptions */
	& + &,
	&:first-child {
		margin-top: 0;
	}
}
