@use "mixins";
@use "variables";

.jb-section {
	padding-top: variables.$padding;
	padding-bottom: variables.$padding;
	isolation: isolate;
	z-index: 10;

	.jetpack-boost-jitm-card .jitm-card {
		margin: 0 0 2.5rem auto;
	}

}

.jb-section--alt {
	background-color: variables.$alt_white;
}

.jb-section--scores {
	position: relative;
	z-index: 15;
}

.jb-container,
%jb-container {
	width: 87.5%;
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;

	&--narrow {

		@extend %jb-container;
		max-width: 744px;
	}

	&--fixed {
		max-width: 1176px;
		width: auto;
		padding-left: 24px;
		padding-right: 24px;
	}
}

.jb-dashboard-footer {

	@extend %jb-container;

	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: variables.$padding;
	margin-bottom: variables.$padding;

	@include mixins.breakpoint( xs ) {
		flex-direction: column;
		justify-content: flex-start;
	}
}

.jb-warning-modal {

	&__actions {
		display: flex;
		justify-content: flex-end;

		> div {
			display: flex;
			flex-direction: column;

			> div {
				display: flex;
			}
		}

		button {
			margin-left: auto;

			&.confirm {
				margin-left: 10px;
			}
		}

		.checkbox {
			font-size: 12px;
			margin-top: 10px;
		}
	}
}
