@use "../../scss/calypso-mixins";
@use "../../scss/mixins/ui";
@use "../../scss/typography";

.dash-security-bundle {
	display: flex;
	flex-direction: column;
	padding: 36px 30px 36px 36px;

	background: rgb(249, 249, 246);
	background: linear-gradient(133deg, rgb(206, 217, 242) 0%, rgb(249, 249, 246) 10%, rgb(249, 249, 246) 80%, rgb(245, 230, 179) 100%);

	@include ui.dashboard-card-shadow;

	// match aag responsive styling
	@include calypso-mixins.breakpoint( ">660px" ) {
		flex-direction: row;
	}

	.dash-security-bundle--icon {
		display: flex;
		align-items: flex-start;
		margin-bottom: 16px;
		margin-right: 0;
		margin-top: 16px;

		@include calypso-mixins.breakpoint( ">660px" ) {
			align-items: center;
			margin-bottom: 0;
			margin-right: 32px;
			margin-top: 0;
		}
	}

	.dash-security-bundle--content {
		display: flex;
		flex-direction: column;
		flex: 1;
		justify-content: space-between;

		@include calypso-mixins.breakpoint( ">660px" ) {
			flex-direction: row;
		}

		.dash-security-bundle--content-info {
			display: flex;
			flex-direction: column;

			h3 {
				font-size: typography.$font-title-medium;
				line-height: 32px;
				font-weight: 500;
				margin: 8px 0 0 0;
			}

			p {
				font-size: typography.$font-body;
				margin: 8px 0 0 0;
			}
		}

		.dash-security-bundle--content-cta {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 16px;
			margin-left: 0;

			@include calypso-mixins.breakpoint( ">660px" ) {
				margin-top: 0;
				margin-left: 16px;
			}

			.dash-security-bundle--content-cta-button {
				white-space: nowrap;

				&:not(.is-primary) {
					padding: 8px 16px;
					margin-left: 8px;
				}
			}
		}
	}
}
