.banner.card {
	border-left: 3px solid;
	cursor: default;
	display: flex;
	align-items: flex-start;
	padding: 12px;
	line-height: 29px;

	&.is-dismissible {
		padding-right: 48px;
	}

	&.is-compact {
		border-left-width: 4px;
		font-size: $font-body-extra-small;
		margin-bottom: 8px;
		padding: 8px 12px 8px 8px;
	}

	&[href] {
		cursor: pointer;
	}

	@include banner-color( var( --color-accent ) );

	&.is-jetpack:not(.is-atomic) {
		@include banner-color( var( --color-jetpack ) );
	}

	.card__link-indicator {
		align-items: center;
		color: var(--color-neutral);
		display: flex;
	}

	&.is-compact .card__link-indicator {
		right: 8px;
	}

	&:hover {
		transition: all 100ms ease-in-out;

		&.is-card-link {
			box-shadow: 0 0 0 1px var(--color-neutral), 0 2px 4px var(--color-neutral-10);
		}
		.card__link-indicator {
			color: var(--color-neutral-dark);
		}
	}

	&:focus {
		&.is-card-link {
			box-shadow: 0 0 0 2px var(--color-primary-light);
		}
	}

	@include breakpoint-deprecated( ">480px" ) {
		align-items: center;

		padding: 12px 16px;

		&.is-dismissible {
			padding-right: 16px;
		}

		&.is-compact.is-dismissible {
			padding-right: 8px;
		}
	}

	&.is-card-link {
		cursor: pointer;
		padding-right: 48px;
	}
}

.banner__icons {
	display: flex;

	.banner__icon,
	.banner__icon-circle {
		border-radius: 50%;
		flex-shrink: 0;
		height: 24px;
		margin-right: 12px;
		width: 24px;
		align-items: center;
		justify-content: center;
	}

	.banner__icon {
		align-self: center;
		color: var(--color-text-inverted);
		display: flex;
	}

	.banner__icon-circle {
		color: var(--color-text-inverted);
		display: none;
		padding: 3px 4px 4px 3px;
	}

	.banner__icon-no-circle {
		display: none;
		padding: 3px 4px 4px 3px;
		margin-right: 16px;
		align-items: center;
		justify-content: center;
	}

	@include breakpoint-deprecated( ">480px" ) {
		align-items: center;

		.banner__icon {
			display: none;
		}
		.banner__icon-circle {
			display: flex;
		}
		.banner__icon-no-circle {
			display: flex;
		}
	}
}

.banner__icon-plan {
	display: flex;
	margin-right: 16px;
	flex-shrink: 0;

	.product-icon {
		height: 32px;
		width: 32px;
	}

	@include breakpoint-deprecated( ">480px" ) {
		align-items: center;
	}
}

.banner__content {
	align-items: center;
	display: flex;
	flex-grow: 1;
	flex-wrap: wrap;

	@include breakpoint-deprecated( ">480px" ) {
		flex-wrap: nowrap;
	}
}

.banner.is-compact .banner__content {
	padding: 5px;
}

.banner__info {
	flex-grow: 1;
	line-height: 1.4;
	width: 100%;

	.banner__title,
	.banner__description,
	.banner__list {
		color: var(--color-neutral-70);
	}

	.banner__title {
		font-size: $font-body-small;
		font-weight: 600;
		margin-bottom: 0;
	}

	.banner__description {
		font-size: $font-body-extra-small;
		margin-top: 3px;
		margin-bottom: 0;
	}

	.banner__list {
		font-size: $font-body-extra-small;
		list-style: none;
		margin: 0;
		li {
			margin: 6px 0;
			.gridicon {
				color: var(--color-neutral);
				display: none;
			}
		}
	}

	@include breakpoint-deprecated( ">480px" ) {
		width: auto;

		.banner__list li .gridicon {
			display: inline;
			margin-right: 12px;
			vertical-align: bottom;
		}
	}
}

.banner.is-compact .banner__title {
	font-size: $font-body-extra-small;
}

.email-verification-banner__highlight {
	text-transform: none;
}

.banner__action {
	align-self: center;
	font-size: $font-body-extra-small;
	margin: 12px 0 0;
	text-align: left;
	width: 100%;

	.button + .is-primary {
		margin-left: 8px;
	}

	.banner__prices {
		display: flex;
		justify-content: flex-start;

		.plan-price {
			margin-bottom: 0;
		}

		.plan-price.is-discounted,
		.plan-price.is-discounted .plan-price__currency-symbol {
			color: var(--color-neutral-70);
		}

		.has-call-to-action & .plan-price {
			margin-bottom: 8px;
		}
	}

	@include breakpoint-deprecated( "<480px" ) {
		.button {
			display: block;
			flex: 1;
		}
	}

	@include breakpoint-deprecated( ">480px" ) {
		margin: 0 -6px 0 8px;
		text-align: center;
		width: auto;

		.is-dismissible & {
			margin-top: 40px;
		}

		.is-compact & {
			margin-right: 0;
		}

		.is-horizontal & {
			flex-shrink: 0;
			margin-right: 0;
		}

		.is-dismissible.is-horizontal & {
			margin-top: 0;
			margin-right: 40px;
		}

		.banner__prices {
			justify-content: flex-end;
			text-align: right;
		}
	}
}

.banner.is-compact .dismissible-card__close-button {
	width: 16px;
	height: 16px;
	margin-top: -10px;
}

.is-horizontal .dismissible-card__close-button,
.is-horizontal .banner__close-icon {
	top: 50%;
	margin-top: -12px;
}

.banner__close-icon {
	position: absolute;
	top: 16px;
	right: 16px;
	color: var(--color-text-subtle);
	cursor: pointer;
}

