@use "variables" as *;
@use "utilities" as *;
@use "components" as *;

body {
	&.toplevel_page_iloveimg-admin-page,
	&.media_page_iloveimg-media-page,
	&.admin_page_iloveimg-watermark-admin-page,
	&.iloveimg_page_iloveimg-compress-admin-page,
	&.iloveimg_page_iloveimg-watermark-options-admin-page,
	&.iloveimg_page_iloveimg-watermark-admin-page,
	&.upload-php,
	&.post-php {
		.iloveimg_settings,
		.iloveimg_restore_button_wrapper {
			input {
				&[type="text"],
				&[type="email"],
				&[type="password"] {
					background: $white;
					border: 1px solid $secondary_300_color;
					border-radius: 2px;
					height: 32px;
					width: 100%;
					margin-bottom: 10px;
					display: block;
					font-weight: bold;
		
					&.iloveimg_field_email {
						background: url("../images/icon_email.svg") 8px center no-repeat;
						text-indent: 22px;
					}
		
					&.iloveimg_field_password {
						background: url("../images/icon_password.svg") 8px center no-repeat;
						text-indent: 22px;
					}
		
					&.iloveimg_field_name {
						background: url("../images/icon_name.svg") 8px center no-repeat;
						text-indent: 22px;
					}
		
					&:-webkit-autofill,
					&:-webkit-autofill:hover,
					&:-webkit-autofill:focus,
					&:-webkit-autofill:active {
						text-indent: 0;
					}
				}

				&[type="submit"],
				&[type="button"] {
					@extend %button-primary;
				}
		
				&[type="checkbox"] {
					appearance: none;
					background: $white;
					border: 1px solid $secondary_300_color;
					box-shadow: none;
					border-radius: 2px;
		
					&:checked {
						border-color: $primary_color;
						color: $danger_color;
						position: relative;
		
						&:before {
							color: $primary_color;
							content: "";
							background: url("../images/check.svg") no-repeat center center;
							display: block;
							background-size: 60%;
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							margin: 0;
						}
					}
				}
			}

			select {
				border: 1px solid $secondary_color;
				max-width: 130px;
				height: 32px;
				border-radius: 0px;
				margin-right: 10px;
			}

			p.submit {
				margin: 0;
				padding: 0;
	
				button[disabled] {
					background: $light_600_color !important;
					text-shadow: none !important;
					cursor: not-allowed;
				}
			}
	
			.button {
				&.button-secondary {
					@extend %button-secondary;
				}
			}
	
			.iloveimg_percent {
				height: 16px;
				width: 100%;
				background-color: $white;
				padding: 4px;
				position: relative;
	
				@media (max-width: $width_medium) {
					width: calc(100% - 20px);
				}
	
				.iloveimg_percent-total {
					height: 8px;
					background: $primary_color;
					max-width: 100%;
				}
	
				&.iloveimg_percent-exceeded {
					&:after {
						content: "";
						display: inline-block;
						width: 20px;
						height: 20px;
						background: url("../images/icon_excedeed.svg");
						background-size: 100%;
						position: absolute;
						right: -25px;
						bottom: -3px;
					}
				}
	
				&.iloveimg_percent-warning {
					&:after {
						content: "";
						display: inline-block;
						width: 20px;
						height: 20px;
						background: url("../images/icon_warning.svg");
						background-size: 100%;
						position: absolute;
						right: -25px;
						bottom: -3px;
					}
				}
	
				&+p {
					margin: 5px 0 12px 0;
				}
			}

			// The switch - the box around the slider
			.switch {
				position: relative;
				display: inline-block;
				width: 30px;
				height: 18px;

				// Hide default HTML checkbox
				input {
					position: relative;
					z-index: 10;
					width: 100%;
					height: 100%;
					margin: 0;
					opacity: 0;
				}
			}

			// The slider
			.slider {
				position: absolute;
				cursor: pointer;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: $white;
				transition: .4s;
				border-radius: 25px;
				border: 1px solid $secondary_color;
	
				&:after {
					content: "";
					position: absolute;
					width: 3px;
					height: 3px;
					top: 6px;
					right: 4px;
					border: 1px solid $secondary_color;
					border-radius: 100%;
					background-color: $white;
				}
	
				&:before {
					position: absolute;
					content: "";
					height: 10px;
					width: 10px;
					left: 3px;
					bottom: 3px;
					background-color: $secondary_color;
					transition: .4s;
					border-radius: 100%;
				}

				// Rounded sliders
				&.round {
					border-radius: 34px;

					&::before {
						border-radius: 50%;
					}
				}
			}

			input {
				&:checked + .slider {
					background-color: $primary_color;
					border: 1px solid $primary_color;
			
					&:after {
						content: "";
						position: absolute;
						width: 1px;
						height: 6px;
						background: $white;
						top: 5px;
						left: 6px;
						border: 0;
					}
			
					&:before {
						transform: translateX(10px);
						background-color: $white;
					}
				}
			
				&:focus + .slider {
					box-shadow: 0 0 1px $primary_color;
				}
			}

			.tooltip {
				position: relative;
				display: inline-block;
				border-bottom: 1px dotted $dark;

				.tooltiptext {
					overflow: hidden;
					visibility: hidden;
					width: 350px;
					background-color: $dark;
					color: $white;
					text-align: center;
					border-radius: 6px;
					padding: 5px 0;
					position: absolute;
					z-index: 1;
					bottom: 115%;
					left: 50%;
					margin-left: -290px;
					font-size: 12px;
					line-height: 16px;

					&::after {
						content: "";
						position: absolute;
						top: 100%;
						left: 50%;
						margin-left: -5px;
						border-width: 5px;
						border-style: solid;
						border-color: $dark transparent transparent transparent;
					}
				}
			}

			.submit {
				button.need_saving {
					animation: shadow-pulse 1s infinite;
				}
	
				button[disabled] {
					&.tooltip:hover .tooltiptext {
						visibility: visible;
					}
				}
			}
	
			.success,
			.compress-success,
			.applied-success {
				display: none;
				color: $success_color;
			}
	
			.error,
			.compress-error,
			.applied-error,
			.compress-abort,
			.applied-abort {
				display: none;
				color: $danger_color;
			}
	
		}
	}
}