// ----------------------------------------------------------------------------
// GX CUSTOMIZER CUSTOMER STYLING
// ----------------------------------------------------------------------------

.gx-customizer {

	// --------------------------------------------------------------------------
	// OVERVIEW PAGE
	// --------------------------------------------------------------------------

	.overview-page {
		margin-top: 24px;

		.dataTableHeadingContent {
			padding: 12px 24px;
		}

		.sets_overview {
			padding: 12px 24px;
			color: $text-color !important;
			line-height: 32px;
			cursor: pointer;
			@include transition(background-color 0.3s);

			a {
				font-size: 12px;
			}

			&:nth-child(odd) {
				background-color: adjust-lightness($background-color, -2.5);
			}

			&:nth-child(even) {
				background-color: $background-color;
			}

			&:last-child {
				border-bottom: none;
			}

			&:hover {
				background-color: $highlight-color;
			}

			&.active {
				background-color: $highlight-color;

				&::before {
					@extend %fa-icon;
					@extend .fas;
					content: fa-content($fa-var-caret-right);
					line-height: 1;
					text-rendering: auto;
					font-size: 24px;
					display: inline-block;
					float: right;
				}
			}
		}

		.gm_gprint_menu {
			@include font(12px);
			background: $highlight-color;
			width: 100%;
			padding: 0;
			overflow: auto;

			form {
				label {
					font-weight: bold;
					margin-bottom: -1px;
					color: $text-color-light;
					display: block;
				}
			}

		}
	}

	// --------------------------------------------------------------------------
	// EDIT PAGE
	// --------------------------------------------------------------------------

	table.edit-page {
		tr.dataTableRow {
			td {
				padding: 0;
			}

			tr {
				background-color: transparent;
			}

			#toolbar {
				td {
					padding: 12px 24px;
					background-color: transparent;
					height: auto;
				}
			}
		}

		h3 {
			margin-bottom: 0;
			font-size: 12px;
			color: $text-color-light;
			line-height: 24px;
		}

		.btn {
			margin-bottom: 0;
		}
	}

	.gm_gprint_flyover {
		div.configuration-box-form-content {
			input[type=text],
			select,
			textarea {
				margin: 12px 0;

				&.icon-input {
					width: 364px;
				}
			}

			.span6 {
				input[type=text],
				select,
				textarea {
					&.icon-input {
						width: 170px;
					}
				}
			}

			.language-flag {
				display: inline-block;
				height: 20px;
				vertical-align: middle;
			}
		}
	}

	.gm_gprint_surface {
		.selected-customizer-element {
			&::before {
				content: "";
				font-family: 'Font Awesome 5 Free';
				font-feature-settings: normal;
				font-kerning: auto;
				font-language-override: normal;
				font-size-adjust: none;
				font-stretch: normal;
				font-style: normal;
				font-synthesis: weight style;
				font-variant: normal;
				font-weight: normal;
				line-height: 1;
				text-rendering: auto;
				font-size: 20px;
				display: inline-block;
				position: absolute;
				right: 0;
				bottom: 0;
				color: $gambio-blue;
			}
		}
	}

	// --------------------------------------------------------------------------
	// CONFIGURATION PAGE
	// --------------------------------------------------------------------------

	.configuration-page {
		.gx-configuration tbody tr td {
			input[type=text] {
				min-width: 20px;
				width: 60px;
				margin-right: 10px;
			}
		}
	}
}