/**
 * The .variables class should be composed into the root class of an MFE or app.
 * After doing so, the variables will be available to CSS in that app's DOM tree.
 *
 * One exception is the grid breakpoints. They use CSS Module Values because
 * media queries can't be scoped to the DOM like variables, so we need a different
 * approach to isolating those.
 */
@value grid-breakpoint-sm: 768px;
@value grid-breakpoint-md: 992px;
@value grid-breakpoint-lg: 1200px;
@value vertical-breakpoint-sm: 640px;

.variables {
	/* Basic colors */
	--color-gray-xxx-light: #f4f4f7;
	--color-gray-xx-light: #e4e4ea;
	--color-gray-x-light: #b6b7c1;
	--color-gray-light: #9a9ca9;
	--color-gray-medium: #585a64;
	--color-gray-dark: #434551;
	--color-gray-x-dark: #1e202b;

	/* Branding colors */
	--color-mfly-primary: #155e93;
	--color-mfly-secondary: #5f5094;

	/* UI colors */
	--color-success-light: #b6f2d6;
	--color-success: #21664c;
	--color-danger-light: #fddedb;
	--color-danger: #9d3a18;
	--color-warning-light: #f6e68a;
	--color-warning: #e4cd6d;
	--color-warning-dark: #7e5105;
	--color-info-light: #d1e9ee;
	--color-info: #435f64;

	/* Button colors */
	--color-button-default-text: #1e202b;
	--color-button-default-background: #fff;
	--color-button-default-border: #b6b7c1;
	--color-button-default-hover-background: #f4f4f7;
	--color-button-default-hover-border: #b6b7c1;
	--color-button-primary-text: #fff;
	--color-button-primary-background: #155e93;
	--color-button-primary-border: #155e93;

	/* Colors used in ui-theme (React) */
	--color-ui-theme-primary: #155e93;
	--color-ui-theme-primary-dark: #1c486f;
	--color-ui-theme-primary-light: #2b83c6;
	--color-ui-theme-secondary: #5f5094;
	--color-ui-theme-success: #21664c;
	--color-ui-theme-warning: #e4cd6d;
	--color-ui-theme-info: #435f64;
	--color-ui-theme-error: #9d3a18;
	--color-ui-theme-text-primary: #1e202b;
	--color-ui-theme-text-secondary: #585a64;
	--color-ui-theme-text-disabled: #b6b7c1;
	--color-ui-theme-background-default: #fff;
	--color-ui-theme-background-overlay: rgba(30, 32, 43, 0.8);

	/* Box shadows */
	--dropdown-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	--dropup-box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.15);
	--modal-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
	--navbar-box-shadow: 0 3px 5px rgba(25, 25, 25, 0.75);
	--notification-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.5);
	--input-focus-box-shadow: 0 0 8px rgba(187, 187, 187, 0.9);
	--input-dirty-focus-box-shadow: 0 0 8px rgba(84, 168, 68, 0.8);
	--input-invalid-focus-box-shadow: 0 0 8px rgba(169, 68, 66, 0.8);

	/* Inputs */
	--form-input-border-width: 1px;
	--form-input-border-radius: 3px;
	--form-input-height: 34px;

	/* Input groups */
	--form-group-margin-bottom: 20px;

	/* Grid breakpoints */
	--grid-breakpoint-sm: grid-breakpoint-sm; /* Note: everything from 0 to 768px is "xs" grid size */
	--grid-breakpoint-md: grid-breakpoint-md;
	--grid-breakpoint-lg: grid-breakpoint-lg;

	/* Vertical breakpoints */
	--vertical-breakpoint-sm: 640px;

	/* Site header sizes */
	--site-header-height: 100px;
	--site-header-height-small: 60px;

	/* Typography */
	--font-stack-main: 'Roboto', sans-serif;
	--font-stack-headers: 'Poppins', sans-serif;
	--font-size-base: 14px;
	--font-line-height-base: 1.7;
	--font-line-height-header: 1.3;
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;

	/**
	 * Z-index
	 *
	 * Eventually, we want to move to a set of z-index constants, so we know for
	 * sure there are no rogue values floating around and we can totally predict
	 * the stacking order.
	 *
	 * However, for now we are starting by just collecting z-index values in these
	 * variables. This lets us see the relative stacking of elements even if they're
	 * not standardized.
	 *
	 * For example: https://gist.github.com/toadkicker/fc290e84d7bd861e3e73
	 */
	--z-index-spectrum-preview: 0;
	--z-index-ftm: 1005;
	--z-index-site-header: 1024;
	--z-index-site-navbar: 1024;
	--z-index-modal-backdrop: 1251;
	--z-index-modal: 1252;
	--z-index-dropdown-menu: 1300;
	--z-index-hover-tooltip: 1400;
	--z-index-ftm-high: 8000;
	--z-index-ftm-arrow-before: 8001;
	--z-index-ftm-arrow-after: 8002;
	--z-index-feedback: 9999;
	--z-index-ftm-max: 50000;
	--z-index-spectrum-container: 9999994;
}

.button {
	align-items: center;
	background-color: var(--color-button-default-background);
	border: 1px solid var(--color-button-default-border);
	border-radius: 17px;
	box-shadow: inset 1000px 400px 0 0 rgba(0, 0, 0, 0);
	color: var(--color-button-default-text);
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: var(--font-weight-bold);
	height: 34px;
	line-height: 20px; /* Match text positioning of non-module inline-block buttons */
	padding: 6px 17px;
	text-align: center;
	transition: all 0.25s ease-in;
	user-select: none;
	vertical-align: middle; /* Match baseline of non-module inline-block buttons */
	white-space: nowrap;

	@media (hover: hover) {
		&:hover {
			background-color: var(--color-button-default-hover-background);
			border-color: var(--color-button-default-hover-border);
			color: var(--color-button-default-text);
		}
	}

	&:active {
		background-color: var(--color-button-default-hover-background);
		border-color: var(--color-button-default-hover-border);
		box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
		color: var(--color-button-default-text);
		outline: 0;
	}

	&:focus {
		box-shadow: 0 0 8px rgba(131, 131, 131, 0.9);
		outline: none;
		outline-offset: 0;
	}

	&[disabled] {
		box-shadow: none;
		color: var(--color-ui-theme-text-disabled);
		pointer-events: none;
	}
}

.button.isPrimary {
	background-color: var(--color-button-primary-background);
	border-color: var(--color-button-primary-border);
	color: var(--color-button-primary-text);

	@media (hover: hover) {
		&:hover {
			box-shadow: inset 1000px 400px 0 0 rgba(0, 0, 0, 0.2); /* Dynamically darken - this is useful because primary buttons might be themed */
			color: var(--color-button-primary-text);
		}
	}

	&:focus {
		box-shadow:
			inset 1000px 400px 0 0 rgba(0, 0, 0, 0),
			0 0 8px rgba(131, 131, 131, 0.9);
	}

	&[disabled] {
		background-color: var(--color-gray-xx-light);
		border-color: var(--color-gray-xx-light);
		color: var(--color-ui-theme-text-disabled);
	}
}

.button.isTertiary {
	background-color: transparent;
	border-color: transparent;

	@media (hover: hover) {
		&:hover {
			background-color: var(--color-button-default-hover-background);
			border-color: var(--color-button-default-hover-border);
			color: var(--color-button-default-text);
		}
	}
}

.button.isLarge {
	border-radius: 24px;
	font-size: 18px;
	height: auto; /* Match the non-module large button height instead of using fixed height of flex button */
	line-height: 1.33;
	padding: 11px 24px 11px;
}

.button.isLogin {
	border-radius: 24px;
	font-size: 18px;
	height: auto; /* Match the non-module large button height instead of using fixed height of flex button */
	line-height: 1.33;
	padding: 11px 20% 11px;
}

.button.isSmall {
	border-radius: 16px;
	font-size: 13px;
	font-weight: var(--font-weight-regular);
	height: auto; /* Match the non-module large button height instead of using fixed height of flex button */
	line-height: 1;
	padding: 6px 12px;
}

.button.isRoundRect {
	background: #fff;
	border: none;
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 30%);
	font-size: 13px;
	font-weight: var(--font-weight-regular);
	height: auto; /* Match the non-module large button height instead of using fixed height of flex button */
	line-height: 1;
	padding: 6px 12px;
	white-space: nowrap;

	/* We set an explicit background on this button so we need more specificity on the hover style: */
	@media (hover: hover) {
		&:hover {
			background-color: var(--color-button-default-hover-background);
			border-color: var(--color-button-default-hover-border);
			color: var(--color-button-default-text);
		}
	}

	:global(.far),
	:global(.fal),
	:global(.fas) {
		margin-right: 4px;
	}
}

.buttonGroup {
	/* Font-size override to suppress whitespace in output */
	font-size: 0;

	/* Interior rounded edges and margins are removed & borders are added: */
	& .button:not(:first-child) {
		border-bottom-left-radius: 0;
		border-left: none;
		border-top-left-radius: 0;
		margin-left: 0;
	}

	& .button:not(:last-child) {
		border-bottom-right-radius: 0;

		/**
		 * All buttons except the last one get a right-border.
		 * The primary-background color looks good and ensures a primary button in
		 * the group doesn't have a clashing gray border against it.
		 */
		border-right: 1px solid var(--color-button-default-border);
		border-top-right-radius: 0;
		margin-right: 0;
	}

	/* "Selected" buttons can be used to indicate state. */
	& .button.isSelected {
		background-color: var(--color-gray-xx-light);
		color: var(--color-gray-x-dark);
	}
}

.formBottomButtonGroup {
	align-items: center;
	border-top: 1px solid var(--color-gray-xx-light);
	display: flex;
	justify-content: flex-end;
	margin-top: 50px;
	padding-top: 10px;

	& .button {
		margin-left: 5px;
	}

	/* The default is too tight between the leftmost button and text hints or links. */
	& .button:first-of-type {
		margin-left: 10px;
	}
}

/**
 * Work around ng-show waiting the transition duration before hiding.
 * https://github.com/angular/angular.js/issues/8224
 * Apply the .ng-animate-opt-in class to get the old behavior back.
 */
.button:global(.ng-animate):not(:global(.ng-animate-opt-in)) {
	transition-duration: 0s;
}

.pageContainer {
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;

	@media (min-width: 768px) { /* grid-breakpoint-sm */
		width: 750px;
	}

	@media (min-width: 992px) { /* grid-breakpoint-md */
		width: 970px;
	}

	@media (min-width: 1200px) { /* grid-breakpoint-lg */
		width: 1170px;
	}
}

.hero,
.h1,
.h2,
.h3 {
	font-family: var(--font-stack-headers);
	font-weight: var(--font-weight-light);
	line-height: var(--font-line-height-header);

	&.verticalMargin {
		margin-bottom: 10px;
		margin-top: 20px;
	}
}

.hero {
	font-size: 38px;
}

.h1 {
	font-size: 28px;
}

.h2 {
	font-size: 20px;
}

.h3 {
	font-size: 16px;
}

.h4 {
	font-family: var(--font-stack-main);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-base);

	&.verticalMargin {
		margin-bottom: 10px;
		margin-top: 10px;
	}
}

/**
 * The page header is designed to wrap a page icon/title and optional
 * right-aligned actions or additional content below the title.
 */
.pageHeader {
	--header-margin: 30px;

	align-items: flex-start;
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--header-margin);
	padding-top: var(--header-margin);
}

.pageTitle,
h1.pageTitle {
	align-items: center;
	display: flex;
	font-size: 28px;
	font-weight: var(--font-weight-light);
	margin: 0;

	&:not(:last-child) {
		margin-bottom: 15px;
	}

	&.isSubtle {
		color: var(--color-gray-x-light);
	}

	&.isSubtle.isReact {
		margin-right: 12px;
	}
}

.pageTitleIcon {
	color: var(--color-gray-x-light);
	margin-right: 2px;

	&.isReact {
		margin-right: 12px;
	}
}

.link {
	background: transparent;
	border: none;
	color: var(--color-gray-medium);
	padding: 0; /* when a button has this class, we don't want the button's padding on it */
	text-decoration: underline;
	transition: color 0.3s;

	&:hover,
	&:focus {
		background: transparent;
		border: none;
		color: var(--color-gray-x-dark);
	}

	/* Style the focus outline for accessibility purposes */
	&:focus {
		background: transparent;
		border: none;
		outline: thin dotted;
		outline-offset: 0;
	}

	&.isDisabled {
		color: var(--color-gray-x-light);
		cursor: not-allowed;
	}

	/**
	 * Work around ng-show waiting the transition duration before hiding.
	 * https://github.com/angular/angular.js/issues/8224
	 *
	 * Apply the .ng-animate-opt-in class to get the old behavior back.
	 */
	&:global(.ng-animate):not(.ng-animate-opt-in) {
		transition-duration: 0s;
	}
}

/* Links that wrap an icon and some text (we don't want the icon to be underlined) */
.link.hasIcon {
	align-items: baseline;
	display: inline-flex;
	text-decoration: none;

	:global(.far),
	:global(.fal),
	:global(.fas),
	:global(.fab),
	:global(.mfly-font) {
		margin-right: 5px;
	}

	.linkText {
		text-decoration: underline;
	}
}