.components-notice {
	display: flex;
	font-family: $default-font;
	font-size: $default-font-size;
	background-color: $white;
	border-left: 4px solid var(--gc-admin-theme-color);
	margin: 5px 15px 2px;
	padding: 8px 12px;
	align-items: center;

	&.is-dismissible {
		padding-right: 36px;
		position: relative;
	}

	&.is-success {
		border-left-color: $alert-green;
		background-color: lighten($alert-green, 45%);
	}

	&.is-warning {
		border-left-color: $alert-yellow;
		background-color: lighten($alert-yellow, 35%);
	}

	&.is-error {
		border-left-color: $alert-red;
		background-color: lighten($alert-red, 35%);
	}
}

.components-notice__content {
	flex-grow: 1;
	margin: $grid-unit-05 #{ $button-size-small + $border-width } $grid-unit-05 0;
}

.components-notice__actions {
	display: flex;
	flex-wrap: wrap;
}

.components-notice__action.components-button {
	&,
	&.is-link {
		margin-left: $grid-unit-15;
	}
	&.is-secondary {
		vertical-align: initial;
	}

	// When it has better support, this can be replaced
	// with column-gap since these are flex items.
	margin-right: $grid-unit-10;
}

.components-notice__dismiss {
	color: $gray-700;

	// Place the dismiss button at the top of the container, even when text wraps onto two lines.
	align-self: flex-start;
	flex-shrink: 0;

	&: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: $gray-900;
		background-color: transparent;
	}

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

.components-notice-list {
	// 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.gechiui.com/ticket/47603#ticket.
	max-width: 100vw;
	box-sizing: border-box;

	.components-notice__content {
		margin-top: $grid-unit-15;
		margin-bottom: $grid-unit-15;
		line-height: 2;
	}

	.components-notice__action.components-button {
		display: block;
		margin-left: 0;
		margin-top: $grid-unit-10;
	}
}