.wc-block-store-notice {
	margin: $gap 0;
	@include font-size(small);
	padding: 0.5em;
	border-radius: 4px;
	border: 2px solid;

	.components-notice__content {
		position: relative;

		> div {
			padding-left: 2.5em;
		}
		svg {
			vertical-align: middle;
			width: 2em;
			height: 2em;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	&.is-warning {
		background-color: #fffdf9;
		border-color: #fec;

		.components-notice__content svg {
			fill: #f9b51f;
		}
	}

	&.is-info {
		background-color: #e7f6f9;
		border-color: #c8f6ff;

		.components-notice__content svg {
			fill: #419ece;
		}
	}

	&.is-error {
		background-color: #f8ebea;
		border-color: #ffd4cd;

		.components-notice__content svg {
			fill: #cd433b;
		}
	}
}