@use "~admin-stylesheets/colors";

.nab-subscription-promo-banner {
	display: flex;
	align-items: center;
	gap: 2em;
	padding: 1.25em 1.5em;

	background: colors.$nab-background-white;
	border: 1px solid colors.$wp-admin-theme-color;
	border-left-width: 4px;
	overflow: hidden;
	position: relative;

	&::before {
		content: "";
		background: colors.$wp-admin-theme-color;
		opacity: 0.1;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	> * {
		z-index: 1;
	}

	&__content {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: 0.35em;
	}

	&__title {
		font-size: 1.15em;
	}

	&__actions {
		align-items: center;
		flex-shrink: 0;
		display: flex;
		gap: 1em;
	}

	@media (max-width: 782px) {
		align-items: flex-start;
		flex-direction: column;
		gap: 1em;
	}
}