@use "~admin-stylesheets/breakpoints";
@use "~admin-stylesheets/colors";

#nelio-content-page .components-notice {
	margin: 0;
}

.nelio-content-account-container {
	margin-top: 1em;

	&__box {
		background: colors.$layout-colors__background;
		border: 1px solid colors.$layout-colors__border;
		border-radius: 2px;
		height: fit-content;
		margin: 0;
		position: relative;
	}

	&--is-agency-summary,
	&--is-invitation,
	&--is-subscribed {
		display: grid;
		grid-template-areas: "plan" "account";
		grid-gap: 1em;

		@include breakpoints.break-wide {
			grid-template-areas: "plan account";
			grid-template-columns: 1fr 1fr;
		}
	}

	&--is-subscribed {
		grid-template-areas: "plan" "account" "billing";

		@include breakpoints.break-wide {
			grid-template-areas: "plan account" "billing billing";
		}
	}

	&--is-subscribed#{&}--is-multi-site {
		grid-template-areas: "plan" "account" "sites" "billing";

		@include breakpoints.break-wide {
			grid-template-areas: "plan account" "sites billing";
		}
	}

	&--is-invitation#{&}--is-multi-site {
		grid-template-areas: "plan" "account" "sites";

		@include breakpoints.break-wide {
			grid-template-areas: "plan account" "sites sites";
		}
	}
}