@use "../../common/breakpoints" as *;
@use "../../common/variables" as *;
@use "../../common/mixins/utilities" as *;

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

@use "sass:math";

#wpwrap {
	overflow: hidden;
}

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

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

	h1 {
		text-transform: capitalize;
		margin-bottom: math.div($grid-gutter-width, 2);
		font-weight: bold;
		color: var(--blue-dark);
		font-size: 36px;
		margin-bottom: 20px;
	}

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

		@include mobile-max{
			flex-wrap: wrap;
		}
		
		> .alert {
			width: 100%;
			height: 26px;
			margin-left: 10px;
		}

	}

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

		&.bg-light {
			background-color: var(--white);
			color: var(--atum-text-color-var1);
		}
		
	}

	.atum-nav {
		border: none;
		@include atum-panel();
		background-color: var(--atum-settings-nav-bg);
		position: relative;
		min-width: 230px;
		display: flex;
		flex-direction: column;
	}
	
	.atum-nav-header {
		background-color: var(--atum-settings-heads-bg);
		box-shadow: 0 1px 0 0 var(--white-shadow);
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top-right-radius: 4px;
		border-top-left-radius: 4px;

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

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

			.atum-brand {
				display: flex;
				align-items: center;
				text-decoration: none;
				color: var(--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 {
		margin-top: $grid-gutter-width;
		width: 100%;

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

			img {
				width: 34px;
			}

			span {
				color: var(--atum-settings-text-logo);
				font-size: 27px;
				margin-left: 10px;
				font-weight: bold;
			}
		}

		p {
			color: var(--atum-settings-text-logo);
			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: var(--primary);

				&:hover {
					color: var(--primary);
				}
			}
		}
	}

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

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

	.atum-nav-item {
		display: block;
		margin: 0;
		box-shadow: 0 1px 0 0 var(--white-shadow);
		border-bottom: solid 1px var(--gray-400);
	}

	.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: var(--atum-settings-nav-link);
		transition: color 0.3s;
		height: 51px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		
		&.active, &:hover, &:focus {
			outline: none;
			color: var(--primary-var-text2);
			box-shadow: none;
			background-color: var(--primary-dark);
			font-size: 15px;
			font-weight: bold;
			border-right: 5px solid var(--primary-var-text2);
			
		}

		.menu-helper {
			padding-top: 0.45em;
			padding-bottom: 0.5em;
			pointer-events: none;
			display: flex;
			align-items: center;

			&:before, &:after {
				content: '';
				position: absolute;
				left: 0;
				width: 100%;
				height: 1px;
				opacity: 0;
				background: var(--atum-bg-white);
				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: 18px;
				vertical-align: -2px;
			}

		}

	}
	
	.atum-multi-checkbox-option, .atum-multi-checkbox-all {
		width: 50%;
		display: inline-block;
		margin-bottom: math.div($grid-gutter-width, 2);
		
		input[type=checkbox] {
			&:focus {
				border-color: var(--success);
				box-shadow: 0 0 0 1px var(--success);
			}
		}
		
		&.setting-checked label {
			color: var(--atum-checkbox-label);
			
			input[type=checkbox] {
				background-color: var(--success);
				border: 0;
				
				&:checked::before {
					color: var(--white);
					content: $atmi-checkmark;
					@include atum-icon-font-family;
					font-size: 14px;
					margin: 8px -2px 0;
					font-weight: bold;
				}
				
			}
		}
		
	}
	
	.remove-datepicker-range {
		border: 0;
		
		&:checked::before {
			border-radius: 4px;
			background-color: var(--success);
			color: var(--white);
			content: $atmi-checkmark;
			@include atum-icon-font-family;
			font-size: 14px;
			font-weight: bold;
			padding-top: 10px;
			height: .68rem;
		}
	}
	
	.atum-multi-checkbox-all {
		display: block;
		width: 100%;
		margin-bottom: 20px;
	}
	
	@include desktop-max {
		.atum-nav {
			min-width: 200px;

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

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

	@include tablet-max {
		.atum-nav {
			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 {
			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-multi-checkbox-option {
			width: 100%;
		}
		
	}
	
	// Settings form
	#atum-settings {
		width: 100%;
		margin-left: 20px;
		
		.btn-group {
			label {
				line-height: 1.5;
				font-size: 14px;
			}
		}
		
		.form-settings-wrapper {
			position: relative;
			
			&.overlay {
				&:before {
					content: '';
					@include overlay(var(--gray-100), 0.5, 10);
				}
				
				&:after {
					content: '';
					top: 45%;
					left: 0;
					right: 0;
					margin: auto;
					@include loader(50px, $info, 3px);
					border-top-color: var(--atum-text-color-var1);
				}
			}
		}
		
		.btn {
			line-height: 18px;
		}
		
		.btn-secondary {
			background-color: var(--gray-500);
			border: none;
			color: var(--white);
			
			&:hover, &:active {
				&:not(.active) {
					background-color: var(--gray-600);
				}
			}
		}
		
		.active {
			background-color: var(--tertiary-var);
			box-shadow: inset -1px 1px 5px 0 var(--black-shadow);
			color: var(--atum-table-bg);
		}
		
		.section-general-title {
			padding: 0 20px;
			background-color: var(--atum-settings-heads-bg);
			border-radius: 6px;
			height: 51px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			+ .alert {
				margin-top: math.div($grid-gutter-width, 2);
			}
			
			.submit {
				margin: 0;
				padding: 0;
			}
			
			h2 {
				color: var(--white);
				margin: 0;
				text-transform: uppercase;
				font-size: 18px;
				font-weight: bold;
				padding-left: 5px;
				font-weight: bold;
			}
		}
		
		.settings-section {
			border-radius: 6px;
			
			&#atum_setting_shipping {
				display: none;
			}
		}
		
		.section-title {
			margin-top: 11px;
			border: 1px solid var(--gray-400);
			border-bottom: none;
			background-color: var(--atum-settings-section-bg);
			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: var(--main-title);
			
			.select2-dropdown {
				.select2-search {
					display: none;
				}
			}
			
			.select2-search {
				line-height: 1;
				
				&:after {
					@include atum-icon-font-family;
					content: $atmi-magnifier;
					padding-right: 15px;
					font-size: 12px;
					top: 13px;
					right: 0;
					position: absolute;
				}
			}
			
			input[type=search] {
				&::placeholder {
					font-style: italic !important;
					color: var(--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-html-container, .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: var(--main-title);
				margin: 0;
				text-transform: capitalize;
				font-size: 18px;
				font-weight: bold;
			}
			
		}
		
		.section-fields {
			padding: 0px 20px 120px 25px;
			border-bottom-right-radius: 6px;
			border-bottom-left-radius: 6px;
			background: var(--atum-settings-section-bg) url("#{$atum-img-path}settings/bg-settings.png") no-repeat bottom;
			background-size: 100% auto;
			box-shadow: 0 4px 0 0 var(--gray-400);
			position: relative;
			border: 1px solid var(--gray-400);
			
			.reset-default-colors {
				position: absolute;
				right: 20px;
			}
			
			.form-table {
				margin-top: 0;
			}
			
			tr {
				&:not(:first-child):not(.no-sep) {
					border-top: 0.5px solid var(--gray-400);
				}
			}
			
			th, td {
				padding-top: 20px;
				
				input[type=text] {
					box-shadow: none;
					padding-left: 10px;
					font-size: 14px;
					width: 350px;
					
					&.atum-datepicker {
						width: 80px;
					}
					
					@include tablet-max {
						width: 80% !important;
					}
					
					@include mobile-max {
						width: 100% !important;
					}
				}
			}
			
			th {
				width: 37%;
				color: var(--atum-text-color-var1);
				font-weight: bold;
				font-size: 15px;
				padding-top: 25px;
				
				.label {
					border-radius: 4px;
					padding: 2px 6px;
					display: inline-block;
					margin-top: 5px;
					font-weight: normal;
					font-size: 10px;
					cursor: default;
					
					&-secondary {
						background-color: var(--atum-text-color-var1);
						color: var(--atum-section-field);
					}
				}
			}
			
			.theme-selector-wrapper {
				display: flex;
				flex-direction: column;
				
				input[type=radio] {
					display: none;
				}
				
				.selector-container:not(:last-child) {
					border-bottom: solid 1px var(--gray-400);
				}
				
				.selector-container {
					display: flex;
					justify-content: flex-start;
					padding: 35px 0;
					
					.selector-box {
						min-width: 171px;
						min-height: 129px;
						cursor: pointer;
						
						img {
							width: 171px;
							height: 129px;
							border: 2px solid var(--gray-500);
							border-radius: 5px;
							
							&.active {
								border: 2px solid var(--blue);
								box-shadow: 0 10px 20px 0 var(--black-shadow);
								
							}
						}
					}
					
					.selector-description {
						padding: 0 15px;
						div {
							color: var(--atum-text-color-var1);
							font-weight: bold;
							font-size: 15px;
						}
					}
				}
			}
			
			.atum-setting-info {
				color: var(--atum-text-color-var2);
				margin-bottom: math.div($grid-gutter-width, 2);
				padding-top: 12px;
				font-size: 15px;
				font-weight: normal;
				font-style: normal;
				font-stretch: normal;
				line-height: 1.47;
				
				&.no-padding {
					padding: 0;
				}
				
				ul {
					padding-left: math.div($grid-gutter-width, 2);
					
					li {
						list-style: disc;
						line-height: 1.1;
						line-height: 1.47;
						margin-bottom: 0;
						
						strong {
							font-weight: normal;
							color: var(--atum-setting-info);
						}
					}
				}
			}
			
			input[type=text], input[type=number], select, textarea {
				padding: 6px;
				margin: 0;
				border-radius: 4px;
				height: 30px;
				color: var(--atum-input-text);
				border: 1px solid var(--main-border-alt);
				box-shadow: none;
				
				&:focus {
					border: solid 1px var(--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;
				}
			}
			
			input[type=text] {
				max-width: 260px;
			}
			
			.region-switcher, .range-remover {
				display: flex;
				flex-wrap: wrap !important;
			}
			
			.region-switcher {
				.tool-runner {
					margin-left: 0 !important;
				}
			}
			
			.script-runner {
				display: flex;
				flex-wrap: nowrap;
				gap: math.div($grid-gutter-width, 3);
				
				.tool-runner {
					text-transform: uppercase;
					font-size: 12px;
					height: 30px;
					line-height: 1;
				}
				
				.atum-select2-container {
					height: 30px;
					padding-bottom: 8px;
					
					@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 {
										color: $wp-gray-1;
									}
									
									@include mobile-max {
										width: 100% !important;
									}
								}
							}
						}
						
					}
				}
				
				.checkbox-wrapper {
					margin-left: 14px;
					line-height: 30px;
					color: var(--atum-checkbox-label);
					display: flex;
					align-items: center;
					gap: 5px;
					
					> input[type=checkbox] {
						margin: 0;
					}
					
					label {
						font-size: 13px;
					}
				}
				
				.tool-fields-wrapper {
					width: 100%;
					
					.repeatable-row {
						display: flex;
						align-items: center;
						margin-bottom: math.div($grid-gutter-width, 2);
						gap: math.div($grid-gutter-width, 2);
						
						i {
							cursor: pointer;
							transition: 0.2s ease-in-out;
						}
						
						.tool-fields-from, .tool-fields-to {
							position: relative;
							
							.range-datepicker {
								width: inherit;
							}
							
							select {
								width: 100% !important;
								padding-top: 0;
								padding-bottom: 0;
							}
							
							.select2-container {
								&.atum-select2, &.atum-enhanced-select {
									width: 100% !important;
								}
							}
							
							.select2-selection__choice {
								font-size: 12px;
								
								.select2-selection__choice__remove {
									color: var(--white);
									
									&:after {
										font-size: 12px;
									}
								}
							}
						}
						
						.tool-controls {
							display: flex;
							gap: 5px;
						}
						
						.add-row, .remove-row {
							text-transform: uppercase;
							font-size: 14px;
							
							i {
								vertical-align: -1px;
							}
						}
						
						.tool-fields-to {
							margin-right: 10px;
							
							.select2-selection__rendered {
								padding-left: 4px;
							}
						}
					}
					
					.error-message {
						display: block;
						color: var(--danger);
						margin-top: math.div($grid-gutter-width, 2);
						font-weight: normal;
						font-size: 12px;
					}
					
					&.range-fields-block {
						.tool-fields-from, .tool-fields-to {
							&::after {
								content: $atmi-calendar-full;
								@include atum-icon-font-family;
								font-size: 12px;
								top: 7px;
								right: 6px;
								position: absolute;
								pointer-events: none;
							}
						}
					}
					
				}
				
				button {
					border-radius: 4px;
				}
				
			}
			
			.select2-container {
				
				&.atum-select2, &.atum-enhanced-select {
					
					@include tablet-max {
						width: 80% !important;
					}
					
					@include mobile-max {
						width: 100% !important;
					}
				}
			}
			
		}
		
		blockquote {
			border-left: 2px solid $primary;
			padding-left: 10px;
			margin-left: 0;
			color: $gray-600;
		}
		
		.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: var(--atum-settings-btn-save);
			border-radius: 5px;
			text-shadow: none;
			box-shadow: none;
			font-size: 12px;
			border: none;
			transition: all 0.2s ease-in-out;
			color: var(--primary-var-text2);
			
			&:hover, &:active {
				background-color: var(--atum-settings-btn-save-hover);
				border-color: var(--atum-settings-btn-save-hover);
				color: var(--primary-var-text2);
				transform: none;
			}
			
		}
		
		// Color Pickers
		.wp-picker-container {
			
			position: relative;
			
			.wp-color-picker {
				max-width: 154px;
			}
			
			.wp-picker-input-wrap {
				
				> label {
					position: absolute;
					left: 24px;
				}
				
				input[type=text] {
					background-color: transparent;
					height: 25px;
					font-size: 12px;
					line-height: 1.17px;
					font-family: inherit;
					
					&, &:hover, &:focus {
						border: none;
					}
				}
				
			}
			
			&.wp-picker-active {
				.wp-color-result-text {
					display: none;
				}
				
			}
			
			@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: 180px;
				margin-right: 10px;
				border: solid 0.5px var(--main-border-alt);
				background-color: var(--atum-settings-wp-color-bg) !important;
				position: relative;
				padding: 0 0 0 20px;
				
				&:focus {
					border-color: var(--blue);
					
					.wp-color-result-text {
						visibility: hidden;
						
						&:before {
							color: var(--atum-text-color-var1);
							content: "|";
							visibility: visible;
						}
					}
				}
				
				.wp-color-result-text {
					line-height: 29px;
					background-color: transparent;
					color: var(--main-text);
					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 var(--black-shadow);
				}
			}
			
			.wp-picker-clear {
				background-color: var(--secondary);
				color: $white;
				border: none;
				height: 30px;
				line-height: 30px;
				text-transform: uppercase;
				
				&:hover {
					background-color: var(--secondary-hover);
				}
			}
		}
		
		// Image uploaders.
		.atum-file-uploader {
			text-transform: uppercase;
			
			&__wrapper {
				display: flex;
				align-items: flex-end;
				
				img {
					max-width: 100px;
					margin-left: $grid-gutter-width;
					border: 2px solid $gray-500;
				}
			}
			
		}
		
		.atum-settings-html {
			color: var(--gray-500);
			margin-bottom: math.div($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: var(--blue);
				text-decoration: none;
			}
		}
		
		.hidden {
			display: none !important;
		}
		
		@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 {
		@include atum-icon-font-family;
		content: $atmi-magnifier;
		padding-right: 7px;
		font-size: 12px;
		top: 13px;
		right: 0;
		position: absolute;
	}
}

input[type=search] {
	&::placeholder {
		font-style: italic !important;
		color: var(--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-html-container, .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;
		}
	}
}

@include loader-rotate-animation;