/** @format */

/**
 * =============================================================================
 *  @fileOverview  Admin Any Page Text Styles
 *  @author        James A Wilson
 *  @version       1.0.0
 */

/**
 * =============================================================================
 *  Global Variables
 */
@use "../common/Common-variables-sass.scss" as sassVariables;

:root {
	--form-margin: 30%;
}

/**
 * =============================================================================
 *  Global Styles
 */
#main_Wrapper {
	grid-template-columns: repeat(12, [col] 1fr);
	column-gap: 1rem;
	row-gap: 0;
	margin: 0 var(--form-margin);
	grid-template-areas:
		"main-form"
		"main-table";

	& #main_Form {
		grid-area: main-form;
		grid-column: col 1 / span 12;
		grid-row: 2;
		margin-bottom: 1rem;

		& #form_Grid {
			grid-template-areas:
				"grid-script"
				"grid-script-id"
				"grid-text";
		}

		& #grid_Script {
			grid-area: grid-script;
			grid-column: col 1 / span 6;
			grid-row: 1;
		}

		& #grid_Script_Id {
			grid-area: grid-script-id;
			grid-column: col 7 / span 6;
			grid-row: 1;
		}

		& #grid_Text {
			grid-area: grid-text;
			grid-column: col 1 / span 12;
			grid-row: 2;
		}
	}

	& #main_Table {
		grid-area: main-table;
		grid-column: col 1 / span 12;
		grid-row: 3;
	}
}

/**
 * =============================================================================
 *  Media Breakpoints
 */
@media only screen and (max-width: #{sassVariables.$screen-bp-xl}) {
	#main_Wrapper {
		margin: 0 calc(var(--form-margin) * 0.8);
	}
}

@media only screen and (max-width: #{sassVariables.$screen-bp-lg}) {
	#main_Wrapper {
		margin: 0 calc(var(--form-margin) * 0.6);
	}
}

@media only screen and (max-width: #{sassVariables.$screen-bp-md}) {
	#main_Wrapper {
		margin: 0 calc(var(--form-margin) * 0.4);
	}
}

@media only screen and (max-width: #{sassVariables.$screen-bp-sm}) {
	nav,
	#main_Wrapper {
		display: none;
	}
	#small_Message {
		display: block;
		margin-top: 2rem;
	}
}