//
// Atum Settings
//---------------

$settings-menu-bg:          $blue-dark-lighten;
$settings-menu-color:       $white;
$settings-menu-active:      $white;
$settings-xs-min:           568px !default;

#wpbody-content {
	padding-bottom: 0;
}

// Settings Menu
.atum-settings-wrapper {
	margin: 0 0 18px;

	.atum-settings-container {
		display: flex;
		align-items: stretch;

		@include mobile-max{
			flex-wrap: wrap;
		}

	}

	// Switch for change settings theme.
	.switch-interface-style {
		float: right;
		width: 165px;
		height: 44px;
		@include atum-panel();
		background-color: $blue-dark-lighten;
		color: $white;
		font-weight: bold;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		&.bg-light {
			background-color: $white;
			color: $gray-600;
		}
	}

	.atum-nav {
		border: none;
		@include atum-panel();
		background-color: $settings-menu-bg;
		position: relative;
		min-width: 230px;
		min-height: 550px;
		
		@include mobile-max {
			min-height: inherit;
		}
	}

	.atum-nav-light {
		background-color: $white;

		.atum-nav-header {
			background-color: $blue;

			.toogle-menu {
				color: $white;
			}
		}
		.atum-nav-link {
			color: $blue;

			&:hover, &:focus {
				background-color: $blue-light;
				color: $blue;
			}

			.menu-helper {
				&:before, &:after {
					background: transparent;
				}
			}

			&.active {
				cursor: default;
				background-color: $blue-light;
				color: $blue;
				border-right: 3px solid $blue;

				.menu-helper {
					animation: inherit;
				}
			}
		}

		.atum-nav-item {
			box-shadow: 0 1px 0 0 $gray-200;
		}

		.nav-footer {
			.nav-footer-logo {
				span {
					color: $blue-dark;
				}
			}

			p {
				color: $gray-500;

				a {
					color: $blue;

					&:hover {
						color: $blue;
					}
				}
			}
		}
	}
	.atum-nav-header {
		background-color: $blue-dark-lighten;
		box-shadow: 0 1px 0 0 rgba($white, 0.1);
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top-right-radius: 6px;
		border-top-left-radius: 6px;

		.toogle-menu {
			font-size: 20px;
			color: $gray-500;
			display: none;
		}

		.atum-brand-link {
			text-decoration: none;

			.atum-brand {
				display: flex;
				align-items: center;
				text-decoration: none;
				color: $white;
				height: 51px;
				font-size: 21px;
				font-weight: bold;
				padding-left: 15px;

				span {
					margin-left: 5px;
				}

				&:focus {
					box-shadow: none;
				}

				img {
					min-width: 25px;
				}
			}
		}
	}

	.nav-footer {
		position: absolute;
		margin: 0;
		bottom: 0;
		width: 100%;

		.nav-footer-logo {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 5px 24px;

			img {
				width: 34px;
			}

			span {
				color: $white;
				font-size: 27px;
				margin-left: 10px;
				font-weight: bold;
			}
		}

		p {
			color: $white;
			margin: 0;
			font-size: 12px;
			font-weight: normal;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			padding: 0 12px 9px 12px;

			a {
				text-decoration: none;
				color: $blue;

				&:hover {
					color: $blue;
				}
			}
		}
	}

	.atum-nav-list {
		position: relative;
		margin: 0;
		list-style: none;
	}

	.expand-menu {
		display: block !important;
	}

	.atum-nav-item {
		display: block;
		margin: 0;
		box-shadow: 0 1px 0 0 rgba($white, 0.1);
	}

	.atum-nav-link {
		text-transform: uppercase;
		font-size: 15px;
		font-weight: bold;
		text-decoration: none;
		padding: 0 20px 0 20px;
		cursor: pointer;
		user-select: none;
		-webkit-touch-callout: none;
		-webkit-tap-highlight-color: rgba($black, 0);
		position: relative;
		overflow: hidden;
		color: $settings-menu-color;
		transition: color 0.3s;
		height: 51px;
		display: flex;
		align-items: center;
		justify-content: flex-start;

		&:hover, &:focus {
			outline: none;
			color: $white;
			box-shadow: none;
			background-color: $blue-dark-light-2;
			font-size: 15px;
			font-weight: bold;
		}

		.menu-helper {
			padding-top: 0.45em;
			padding-bottom: 0.5em;
			pointer-events: none;

			&:before, &:after {
				content: '';
				position: absolute;
				left: 0;
				width: 100%;
				height: 1px;
				opacity: 0;
				background: $settings-menu-active;
				transform: translate3d(0, -3em, 0);
				transition: transform 0s 0.3s, opacity 0.2s;
			}

			&:before {
				top: 0;
			}

			&:after {
				bottom: 0;
			}

			i {
				margin-right: 7px;
				font-size: 16px;
			}

		}

		&.active {
			cursor: default;
			background-color: $blue-dark-light-2;
			font-size: 15px;
			font-weight: bold;
			color: $white;
			border-right: 3px solid $white;
		}

	}

	@include desktop-max {
		.atum-nav {
			min-width: 200px;

			.atum-nav-link {
				font-size: 14px;

				&:active {
					font-size: 14px;
				}
			}
		}
	}

	@include tablet-max {
		.atum-nav, .atum-nav-light {
			width: 50px;
			min-width: inherit;

			.atum-brand-link {
				width: 100%;

				.atum-brand {
					justify-content: center;
					height: 51px;
					text-align: center;
					padding-left: 0;

					span {
						display: none;
					}
				}
			}

			.atum-nav-link {
				padding: 0 15px 0 17px;

				.menu-helper {
					span {
						display: none;
					}
				}
			}

			.nav-footer {
				display: none;
			}
		}
	}

	@include mobile-max {

		.atum-nav, .atum-nav-light {
			width: 100%;
			margin-bottom: 11px;

			.atum-brand-link {
				width: inherit;

				.atum-brand {
					padding-left: 10px;

					span {
						display: block;
					}
				}
			}

			.atum-nav-header {
				border-bottom-right-radius: 6px;
				border-bottom-left-radius: 6px;

				.toogle-menu {
					display: block;
					background-color: transparent;
					border: none;

					&:focus, &:active {
						outline: 0;
					}
				}
			}

			.atum-nav-list {
				display: none;

				.menu-helper {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-start;

					span {
						display: block;
					}
				}
			}

		}
		.atum-nav-light {
			.atum-nav-header {
				background-color: $blue;
				box-shadow: 0 1px 0 0 $gray-200;

				.toogle-menu {
					background-color: transparent;
					border: none;

					&:focus, &:active {
						outline: 0;
					}
				}
			}
		}
	}
	
	// Settings form
	#atum-settings {
		width: 100%;
		margin-left: 20px;
		
		.btn-group {
			height: 30px;
			
			label {
				margin-left: 1px;
				margin-right: 1px;
				line-height: 1.5;
				font-size: 14px;
			}
		}
		
		.form-settings-wrapper {
			position: relative;
			
			&.overlay {
				&:before {
					content: '';
					@include overlay($gray-100, 0.5, 10);
				}
				
				&:after {
					content: '';
					top: 45%;
					left: 0;
					right: 0;
					margin: auto;
					@include loader(50px, $info, 3px);
					border-top-color: $gray-600;
				}
			}
		}
		
		.btn {
			line-height: 1;
		}
		
		.btn-secondary {
			background-color: $gray-500;
			border: none;
			
			&:hover, &:active {
				background-color: $green;
				box-shadow: inset -1px 1px 5px 0 rgba($black, 0.2);
			}
		}
		
		.active {
			background-color: $green;
			box-shadow: inset -1px 1px 5px 0 rgba($black, 0.2);
		}
		
		.section-general-title {
			padding: 0 20px;
			background-color: $blue-dark-lighten;
			border-radius: 6px;
			height: 51px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.submit {
				margin: 0;
				padding: 0;
			}
			
			h2 {
				color: $white;
				margin: 0;
				text-transform: uppercase;
				font-size: 18px;
				font-weight: bold;
				padding-left: 5px;
				font-weight: bold;
			}
		}
		
		.section-general-title-light {
			background-color: $blue;
			
			h2 {
				color: $white;
			}
			
			input[type=submit] {
				&, &:hover {
					background-color: $white;
					color: $blue;
				}
			}
		}
		
		.settings-section {
			border-radius: 6px;
			
			&#atum_setting_shipping {
				display: none;
			}
		}
		
		.section-title {
			margin-top: 11px;
			border-bottom: 2px solid rgba($white, 0.1);
			background-color: $blue-dark-lighten;
			border-top-right-radius: 6px;
			border-top-left-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			height: 50px;
			padding-left: 20px;
			font-size: 18px;
			font-weight: bold;
			color: $white;
			
			.select2-dropdown {
				.select2-search {
					display: none;
				}
			}
			
			.select2-search {
				line-height: 1;
				
				&:after {
					font-family: $atum-icon-font;
					content: $atmi-magnifier;
					padding-right: 15px;
					font-size: 12px;
					top: 13px;
					right: 0;
					position: absolute;
				}
			}
			
			input[type=search] {
				&::placeholder {
					font-style: italic !important;
					color: $gray-500 !important;
					font-size: 12px;
					padding-left: 7px;
				}
			}
			
			@include mobile-max {
				#atum-settings {
					margin-left: 0;
				}
			}
			
			// Sweet alert customizations
			.swal2-container {
				z-index: 100000;
				
				.swal2-content, .swal2-title {
					margin-bottom: $grid-gutter-width;
				}
				
				.swal2-title {
					line-height: 1.3;
					font-size: 23px;
				}
				
				p {
					font-size: 15px;
					text-align: center;
				}
				
				button {
					&:focus {
						outline: none;
					}
				}
			}
			
			.select2-results {
				.select2-results__option {
					&:focus {
						outline: none;
					}
				}
			}
			
			h2 {
				color: $white;
				margin: 0;
				text-transform: capitalize;
				font-size: 18px;
				font-weight: bold;
			}
			
			&.section-title-light {
				background-color: $white;
				border-bottom: 1px solid darken($light, 5%);
				
				h2 {
					color: $blue-dark;
				}
			}
		}
		
		.section-fields {
			padding: 0px 20px 120px 25px;
			border-bottom-right-radius: 6px;
			border-bottom-left-radius: 6px;
			background: $blue-dark-lighten url("#{$atum-img-path}settings/bg-settings.png") no-repeat bottom;
			background-size: contain;
			box-shadow: 0 4px 0 0 $gray-200;
			
			&.section-field-light {
				background-color: $white;
				
				tr:not(:last-child) {
					border-bottom: 1px solid darken($light, 5%);
				}
				
				th {
					color: $gray-600;
				}
			}
			
			.form-table {
				margin-top: 0;
			}
			
			tr {
				&:not(:last-child) {
					border-bottom: 0.5px solid rgba($white, 0.1);
				}
			}
			
			th, td {
				padding-top: 20px;
				
				input[type=text] {
					box-shadow: none;
					padding-left: 10px;
					font-size: 14px;
					width: 350px;
					
					@include tablet-max {
						width: 80% !important;
					}
					
					@include mobile-max {
						width: 100% !important;
					}
				}
			}
			
			th {
				width: 37%;
				color: $white;
				font-weight: bold;
				font-size: 15px;
				padding-top: 25px;
			}
			
			.atum-setting-info {
				color: $gray-500;
				margin-bottom: $grid-gutter-width/2;
				padding-top: 12px;
				font-size: 15px;
				font-weight: normal;
				font-style: normal;
				font-stretch: normal;
				line-height: 1.47;
				
				ul {
					padding-left: $grid-gutter-width/2;
					
					li {
						list-style: disc;
						line-height: 1.1;
						line-height: 1.47;
						margin-bottom: 0;
						
						strong {
							font-weight: normal;
						}
					}
				}
			}
			
			input[type=text], input[type=number], select, textarea {
				padding: 6px;
				margin: 0;
				border-radius: 4px;
				height: 30px;
				color: $gray-600;
				border: 1px solid $gray-200;
				box-shadow: none;
				
				&:hover {
					border: solid 1px $gray-600;
				}
				
				&:focus {
					border: solid 1px $blue;
				}
			}
			
			textarea {
				height: 150px;
			}
			
			input[type=text], input[type=number] {
				height: 30px;
			}
			
			input[type=number] {
				width: 62px;
				text-align: right;
				padding-right: 2px;
				
				&::-webkit-inner-spin-button,
				&::-webkit-outer-spin-button {
					opacity: 1;
				}
			}
			
			.region-switcher {
				display: flex;
				flex-wrap: wrap !important;
			}
			
			.region-switcher {
				.tool-runner {
					margin-left: 0 !important;
				}
			}
			
			.script-runner {
				display: flex;
				flex-wrap: nowrap;
				
				.tool-runner {
					text-transform: uppercase;
					font-size: 12px;
					width: 110px;
					height: 30px;
				}
				
				.atum-select2-container {
					height: 30px;
					padding-bottom: 8px;
					margin-right: 5px;
					
					@include tablet-max {
						width: 80%;
						margin-right: 10px;
					}
					
					@include mobile-max {
						width: 100%;
						margin-right: 0;
					}
				}
				
				.select2-container {
					
					&.atum-select2, &.atum-enhanced-select {
						
						.select2-selection--multiple {
							border-radius: 4px;
							line-height: 1;
							margin-top: 2px;
							
							.select2-search.select2-search--inline {
								margin: 0;
								height: 28px;
								
								.select2-search__field {
									width: inherit !important;
									@include placeholder($wp-gray-1);
									
									@include mobile-max {
										width: 100% !important;
									}
								}
							}
						}
						
					}
				}
				
				.tool-fields-wrapper {
					width: 100%;
					margin-bottom: 20px;
					
					.repeatable-row {
						display: flex;
						align-items: center;
						
						> div {
							margin-right: 10px;
						}
						
						i {
							cursor: pointer;
							transition: 0.2s ease-in-out;
							
							&:hover {
								color: $primary;
							}
							
							&.remove-row {
								&:hover {
									color: $danger;
								}
							}
						}
						
						.tool-fields-from, .tool-fields-to, .tool-controls {
							width: 100%;
							
							.select2-container {
								&.atum-select2, &.atum-enhanced-select {
									width: inherit !important;
								}
							}
							
							.select2-selection__choice {
								line-height: 24px;
								
								.select2-selection__choice__remove {
									color: $white;
								}
							}
						}
						
						.add-row {
							width: 62px;
							text-transform: uppercase;
							height: 30px;
							font-size: 12px;
						}
						
						.tool-fields-to {
							margin-right: 10px;
							
							.select2-selection__rendered {
								padding-left: 4px;
							}
						}
					}
					
					.error-message {
						display: block;
						color: $danger;
						margin-top: $grid-gutter-width/2;
						font-weight: normal;
						font-size: 12px;
					}
					
				}
				
				button {
					border-radius: 4px;
				}
				
			}
			
			.select2-container {
				
				&.atum-select2, &.atum-enhanced-select {
					
					@include tablet-max {
						width: 80% !important;
					}
					
					@include mobile-max {
						width: 100% !important;
					}
				}
			}
		}
		
		.submit {
			padding-top: 0;
			text-align: right;
			margin-top: 35px;
		}
		
		input[type=submit] {
			width: 144px;
			height: 30px;
			text-transform: uppercase;
			padding: 11px 20px 9px;
			line-height: 1;
			height: auto;
			background: $primary;
			border-radius: 5px;
			text-shadow: none;
			box-shadow: none;
			font-size: 12px;
			border: none;
			transition: all 0.2s ease-in-out;
			
			&:hover, &:active {
				background-color: lighten($primary, 10%);
				border-color: lighten($primary, 10%);
				transform: none;
			}
			
		}
		
		// Color Pickers
		.wp-picker-container {
			
			.wp-color-picker {
				max-width: 85px;
			}
			
			@include tablet-max {
				.wp-picker-clear {
					line-height: 0 !important;
				}
			}
			
			@include mobile-max {
				.iris-picker {
					width: 100% !important;
					
					.iris-square {
						width: 76%!important;
					}
					
					.iris-palette-container {
						left: 10%;
					}
				}
			}
			
			button.wp-color-result {
				height: 30px;
				box-shadow: none;
				border-radius: 5px;
				width: 110px;
				margin-right: 10px;
				border: solid 0.5px $wp-gray-5;
				background-color: transparent !important;
				position: relative;
				padding: 0 0 0 20px;
				
				&:hover {
					border-color: $gray-600;
				}
				
				&:focus {
					border-color: $blue;
					
					.wp-color-result-text {
						visibility: hidden;
						
						&:before {
							color: $gray-600;
							content: "|";
							visibility: visible;
						}
					}
				}
				
				.wp-color-result-text {
					line-height: 29px;
					background-color: transparent;
					color: $gray-600;
					border-left: none;
					font-size: 12px;
					line-height: 1.17px;
					text-align: left;
					padding-left: 13px;
				}
				
				.color-picker-preview {
					border-radius: 5px;
					width: 22px;
					height: 22px;
					background-color: transparent;
					position: absolute;
					left: 4px;
					top: 3px;
					box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
				}
			}
			
			.wp-picker-clear {
				background-color: $secondary;
				color: $white;
				border: none;
				height: 31px;
				line-height: 31px;
				
				&:hover {
					background-color: rgba($secondary, .8);
				}
			}
		}
		
		.atum-settings-html {
			color: $gray-500;
			margin-bottom: $grid-gutter-width/2;
			padding-top: 12px;
			font-size: 15px;
			font-weight: normal;
			font-style: normal;
			font-stretch: normal;
			line-height: 1.47;
			
			a {
				color: $blue;
				text-decoration: none;
			}
		}
		
		@include desktop-max {
			.btn-group {
				label {
					line-height: 1.8;
					font-size: 12px;
				}
			}
		}
		
		@include tablet-max {
			margin-left: 10px;
			
			.section-fields {
				.script-runner {
					flex-wrap: nowrap;
					
					.tool-fields-wrapper {
						.repeatable-row {
							.tool-fields-to {
								margin-right: 14px;
							}
						}
					}
				}
			}
			
			.form-table {
				th {
					display: table-cell;
					vertical-align: top;
					width: 30%;
					padding-right: 60px;
				}
			}
		}
		
		@include mobile-max {
			.btn-group {
				label {
					line-height: 1.8;
					font-size: 12px;
				}
			}
			
			.section-general-title {
				p {
					display: none;
				}
			}
			
			.section-fields {
				padding: 4px 10px;
				
				.script-runner {
					flex-wrap: wrap;
					
					.tool-fields-wrapper {
						margin-bottom: 5px;
					}
					
					.tool-runner {
						width: 100%;
						margin-left: 0;
					}
					
					.add-row {
						width: 100% !important;
					}
				}
			}
			
			.submit {
				text-align: center;
				
				input[type=submit] {
					width: 100%;
				}
			}
			
			.form-table {
				margin: 0;
				font-size: 12px;
				width: 100%;
				
				th {
					width: 100%;
					display: block;
					vertical-align: middle;
				}
				
				th, td {
					input[type=text] {
						width: 100%;
					}
				}
				
				td {
					padding-right: 0;
					padding-top: 27px;
				}
				
				.tool-fields-wrapper {
					.repeatable-row {
						flex-wrap: wrap;
						
						div {
							margin-right: 0 !important;
							margin-top: 11px;
						}
					}
				}
			}
		}
	}
	
}

.select2-dropdown {
	margin-top: 4px;
	
	.select2-search {
		display: none;
	}
}

.select2-search {
	line-height: 1;
	
	&:after {
		font-family: $atum-icon-font;
		content: $atmi-magnifier;
		padding-right: 15px;
		font-size: 12px;
		top: 13px;
		right: 0;
		position: absolute;
	}
}

input[type=search] {
	&::placeholder {
		font-style: italic !important;
		color: $gray-500 !important;
		font-size: 12px;
		padding-left: 7px;
	}
}

@include mobile-max{
	#atum-settings {
		margin-left: 0;
	}
}

// Sweet alert customizations
.swal2-container {
	z-index: 100000;
	
	.swal2-content, .swal2-title {
		margin-bottom: $grid-gutter-width;
	}
	
	.swal2-title {
		line-height: 1.3;
		font-size: 23px;
	}
	
	p {
		font-size: 15px;
		text-align: center;
	}
	
	button {
		&:focus {
			outline: none;
		}
	}
}

.select2-results {
	.select2-results__option {
		&:focus {
			outline: none;
		}
	}
}