.activity-log-banner {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-start;
	align-items: flex-start;

	// Success!
	&.is-success {
		.activity-log-banner__icon {
			background-color: var(--color-success);
		}
	}

	// Warning
	&.is-warning {
		.activity-log-banner__icon {
			background-color: var(--color-warning);
		}
	}

	// Error! OHNO!
	&.is-error {
		.activity-log-banner__icon {
			background-color: var(--color-error);
		}
	}

	// General notice
	&.is-info {
		.activity-log-banner__icon {
			background-color: var(--color-primary);
		}
	}
}

.activity-log-banner__icon {
	width: 24px;
	height: 24px;
	padding: 8px;
	margin-left: -5px;
	margin-right: 16px;
	border-radius: 50%;
	color: var(--color-text-inverted);

	background-color: var(--color-neutral-30);
}

.activity-log-banner__content {
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 200px;
}
.activity-log-banner__title {
	margin-bottom: 8px;
	font-weight: 600;
}

.activity-log-banner__controls {
	@include breakpoint-deprecated( "<480px" ) {
		display: flex;
		flex-wrap: wrap;

		> .button {
			flex: 1;
		}
	}
}

.activity-log-banner__action {
	width: 50px;
}

.activity-log-banner__dismiss {
	color: var(--color-neutral-30);
	cursor: pointer;
	margin-top: -8px;
	margin-right: -8px;
}
