@import 'variables';

.clb-importer {
	.clb-nav {
		.ocdi__gl-search-input {
			position: absolute;
		    right: 11px;
		    top: 11px;
		}
	}

	.clb-page-container {
		.clb-demo-holder {
			position: relative;
		}

		.clb-group-sidebar-layout {
			.clb-group {
				margin-bottom: 0;
			}
		}

		.ocdi__response {
			.notice {
				display: block !important;
			}
		}

		// Demo cards
		.clb-group-demo {
			display: flex;
			flex-wrap: wrap;
			margin: -12px -12px 0;

			h3 {
				width: 100%;
				margin-left: 12px;
			}

			&-item {
				width: calc((100%/3) - 24px);
				margin: 12px;
				background-color: #fff;
				@include border_radius(5px);
				overflow: hidden;
				@include animate();
				border: 1px solid rgba($color_border, .95);

				img {
					max-width: 100%;
					height: auto;
					vertical-align: top;
				}

				&-footer {
					padding: 15px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-top: 1px solid rgba($color_dark, .05);

					h4 {
						margin: 0;
						font-size: 14px;
						color: $color_dark;
						min-height: 36px;
						display: flex;
						align-items: center;
						padding-right: 10px;
						font-weight: 500;
					}
				}

				&:hover {
					box-shadow: 0 5px 15px rgba($color_dark, .1);
				}
			}
		}

		// Notes

		&-notice {
		    background-color: #ffe8c0;
		    background: red;
		    border-left: 6px solid rgba(0,0,0,.1);
		    color: rgba(0,0,0,.6);
		    padding: 15px;
		    margin: 8px 0;
		    -webkit-border-radius: 3px;
		    border-radius: 3px;
		}
	}
}

.ohio-theme_page_pt-one-click-demo-import {

	// Dialog Window 
	.ui-dialog {
		border-radius: 8px;
		box-shadow: none;

		&:not(.theme-purchase-form) {
			width: 690px !important;

			.ocdi__modal-item-title {
				text-align: left;
			}
		}

		&.theme-purchase-form {
			width: 420px !important;
		}

		// Envato icon
		.envato-icon {
		    width: 50px;
		    height: 50px;
		    margin: 20px auto 25px;
		    background-color: rgba($color_warning, .2);
		    border-radius: 50%;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    position: relative;

		    &:before {
		    	content: "";
		    	background-color: rgba($color_warning, .2);
		    	border-radius: 50%;
		    	position: absolute;
		    	top: 50%;
		    	left: 50%;
		    	height: 80px;
		    	width: 80px;
		    	transform: translate(-50%, -50%);
		    }

		    > i {
		    	position: absolute;
		    	top: -15px;
		    	right: -15px;
		    	display: block;
		    	width: 20px;
		    	height: 20px;
		    	border-radius: 50%;
		    	background-color: #fff;
		    	box-shadow: 0px 2px 5px rgba(#000, .08);
		    	display: flex;
		    	align-items: center;
		    	justify-content: center;
		    	font-size: 16px;
		    	color: lighten($color_text, 10%);
		    }

		    svg {
		    	fill: $color_warning;
		    }
		}

		.ui-dialog-buttonpane {
			.ui-dialog-buttonset {
				float: right;
			}

			.ui-button {
		    	margin-left: 12px;
		    	min-height: 32px;
			}
		}

		#input_purchase_code {
			font-size: 18px;
			margin: 15px 0;
			width: 100%;
			padding: 6px;
			text-align: center;

			&::-webkit-input-placeholder {
				color: lighten($color_grey, 20%);
			}

			&:-ms-input-placeholder {
			  	color: lighten($color_grey, 20%);
			}

			&::placeholder {
			  	color: lighten($color_grey, 20%);
			}
		}

		&-buttonpane,
		&-titlebar {
		    background: #fff;
		    padding: 20px;
		}

		&-content {
			padding: 0px;
		}

		&-titlebar {
		    background-color: $color_background_light;
		    border-bottom: none;
		    height: auto;
		    font-size: 15px;
		    font-weight: 500;
		    line-height: 1;
		}

		&-content {
			text-align: center;
		}

		.ui-button.ui-dialog-titlebar-close {
			top: 10px;
			right: 10px;
		}

		.ocdi__modal-image-container {
			img {
				width: 100%;
				vertical-align: top;
			}
		}

		.ocdi__modal-item-title {
			font-size: 15.5px;
			font-weight: 500;
			margin: 0;
			color: $color_dark;
			padding: 15px 20px;

			a {
				color: $color_admin;
				box-shadow: none;
			}
		}

		.ocdi__modal-notice {
			&.ocdi__demo-import-notice:not(:empty) {
				border: 1px solid #e5e5e5;
				border-left: 4px solid #00a0d2;
				margin: 1em 0 0;
			}
		}
	}

	.clb-import-inner {
		display: flex;
		border-top: 1px solid rgba($color_dark, .08);

		.clb-import-options {
			text-align: left;
			padding: 20px;
			border-left: 1px solid rgba($color_dark, .08);
			max-width: 290px;

			p {
				font-size: 14px;
				min-width: 100%;
				margin: 0 0 15px 0;
				padding-right: 40%;
			}
		}
	}

	// Preloader

	.ocdi__ajax-loader {
	    display: none;
	    position: absolute;
	    left: 370px;
	    right: 0;
	    top: 40px;

		h3 {
			margin-bottom: 10px;
			font-size: 1.2em;
		}

		.progress-line {
			display: flex;
			background-color: rgba($color_admin, .25);
			margin-bottom: 15px;

			&:before {
				content: '';
				background-color: $color_admin;
				-webkit-animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
				animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
			}

			&, &:before {
				height: 4px;
				@include border_radius(2px);
				width: 100%;
			}
		}

		@-webkit-keyframes running-progress {
			0% { margin-left: 0px; margin-right: 100%; }
			50% { margin-left: 25%; margin-right: 0%; }
			100% { margin-left: 100%; margin-right: 0; }
		}

		@keyframes running-progress {
			0% { margin-left: 0px; margin-right: 100%; }
			50% { margin-left: 25%; margin-right: 0%; }
			100% { margin-left: 100%; margin-right: 0; }
		}
	}

	.ocdi-checkbox-button {
		position: absolute;
		left: 20px;
		bottom: 20px;
		margin: 0 !important;
		padding-left: 20px;
		border: none;
		box-shadow: none !important;
		background: none !important;

		&:after {
			content: '';
			display: block;
			position: absolute;
			left: 0;
			top: 8px;
			width: 12px;
			height: 12px;
			border: 1px solid #aeaeae;
			border-radius: 3px;
			font-weight: bold;
			font-size: 10px;
			line-height: 13px;
		}

		&.ocdi-cb-selected:after {
			content: '✓';
		}
	}

	.preloader {
		margin-right: 10px;

		&:before {
			border: 4px solid rgba($color_admin, .5);
        	border-top-color: $color_admin;
        	width: 38px;
		    height: 38px;
		    vertical-align: top;
		}
	}

	.ocdi-is-fadeout {
		animation: ocdi-fade linear 200ms 1 forwards;
	}

	.ocdi-is-fadein {
		animation: ocdi-fade linear 200ms 1 reverse forwards;
	}
}

// Switcher

.form-switch {
	display: flex;
	align-items: center;
	margin-top: 10px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	font-size: 1.06em;
	height: 14px;

	i {
		position: relative;
		display: inline-block;
		margin-right: .5rem;
		width: 26px;
		height: 14px;
		background-color: lighten($color_grey, 10%);
		@include border_radius(7px);
		vertical-align: text-bottom;
		transition: all 0.3s linear;

		&:before {
			content: "";
			position: absolute;
			left: 0;
			width: 22px;
  			height: 10px;
			background-color: lighten($color_grey, 15%);
			border-radius: 12px;
			transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
			transition: all 0.25s linear;
		}

		&:after {
			content: "";
			position: absolute;
			left: 0;
			width: 10px;
			height: 10px;
			background-color: #fff;
			@include border_radius(6px);
			transform: translate3d(2px, 2px, 0);
			transition: all 0.2s ease-in-out;
		}
	}

	&:active {
		i {
			&:after {
				width: 16px;
				transform: translate3d(2px, 2px, 0);
			}
		}

		input:checked + i:after { 
			transform: translate3d(8px, 2px, 0); 
		}
	}

	input {
		display: none;

		&:checked + i {
			background-color: $color_admin;

			&:before {
				transform: translate3d(14px, 2px, 0) scale3d(0, 0, 0);
			}

			&:after {
				transform: translate3d(14px, 2px, 0);
			}
		}
	}
}