/* Select2 */
.atss-select + .select2 {
	border: none;

	.select-line {
		display: flex;
		align-items: center;

		.select-image {
			margin-right: 0.5rem;
		}
	}

	.select2-selection {
		// display: flex;
		border: none;
		outline: none;
		box-shadow: none;
		border-radius: 0px;
	}

	.select2-selection__rendered {
		padding-left: 30px;
		padding-right: 8px;
	}

	.select2-selection__arrow {
		display: flex;
		align-items: center;
		position: absolute;
		top: 1px;
		left: 1px;
		right: initial;

		&:before {
			font-family: 'dashicons';
			font-size: 1rem;
			content: "\f347";
		}

		b {
			display: none;
		}
	}
}

.select2-container {
	.select-line {
		display: flex;
		align-items: center;

		.select-image {
			margin-right: 0.5rem;
		}
	}

	.atss-select-dropdown {
		border: 1px solid #cccccc;
		border-radius: 2px;
		top: 10px;

		.select2-results__options {
			max-height: 300px !important;
		}

		.select2-results__option--group {
			margin-bottom: 0.75rem;

			.select2-results__group {
				font-size: 0.6875rem;
				font-weight: 500;
				text-transform: uppercase;
				color: #757575;
				padding: 0.75rem 1.25rem;
			}

			.select2-results__option {
				position: relative;
				padding: 0.4rem 1.25rem;
				padding-left: 2.5rem;
				margin-bottom: 0;

				&:before {
					display: flex;
					align-items: center;
					position: absolute;
					top: 0;
					left: 1rem;
					height: 100%;
					font-family: 'dashicons';
					font-size: 1rem;
					content: "\f15e";
					opacity: 0;
				}
			}

			.select2-results__option--selected {
				background-color: transparent;
				color: #1E1E1E;

				&:before {
					opacity: 1;
				}
			}

			.select2-results__option--highlighted {
				background-color: transparent;
				color: #007dba;
			}
		}
	}
}

/* Demos Page */
.atss-demos-page {
	// Base
	.button {
		transition: 0.25s;
		box-shadow: none !important;
		outline: none !important;
	}

	.atss-button {
		padding: 6px 22px;

		&:not(:hover) {
			background: transparent;
		}
	}

	// Badges
	.atss-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0px 6px;
		border-radius: 9px;
		text-transform: uppercase;
	}

	.atss-badge-success {
		background: #DEF3ED;
		color: #3FB28F;
	}

	.atss-badge-info {
		background: #007CBA;
		color: #FFFFFF;
	}

	.atss-badge-warning {
		background: #F8E4E4;
		color: #F58787;
	}

	// Switcher
	.atss-switcher {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 1rem;

		.atss-switch {
			border: 1px solid #000000;
			box-sizing: border-box;
			color: #fff;
			cursor: pointer;
			display: flex;
			height: 1.75rem;
			height: 18px;
			padding: 0;
			position: relative;
			vertical-align: middle;
			width: 36px;
			border-radius: 9px;

			.atss-switch-slider {
				position: absolute;
				top: 3px;
				left: 4px;
				width: 10px;
				height: 10px;
				z-index: 1;
				background: #000000;
				border-radius: 50%;
				transition: left 0.25s ease;
			}
		}

		.atss-tooltip {
			position: absolute;
			top: calc(100% + 5px);
			right: 0;
			min-width: 200px;
			text-align: center;
			padding: 4px 8px;
			font-size: 0.75rem;
			background: #1E1E1E;
			color: #FFF;
			border-radius: 2px;
			opacity: 0;
			visibility: hidden;
			z-index: 2;
		}

		.atss-checkbox {
			position: absolute;
			margin: 0 !important;
			padding: 0 !important;
			border: none;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			z-index: 2;
			appearance: none;

			&[readony],
			&:disabled {
				opacity: 0;

				+ .atss-switch {
					opacity: 0.5;
				}
			}

			&[readony]:hover ~ .atss-tooltip {
				opacity: 1;
				visibility: visible;
			}

			&:checked + .atss-switch {
				border-color: #007dba;
				background: #007dba;
			}

			&:checked + .atss-switch .atss-switch-slider {
				background: #FFFFFF;
				top: 3px;
				left: calc(50% + 4px);
			}
		}
	}

	// Header
	.atss-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;
		margin: 0 0 0 -20px;
		margin-bottom: 20px;
		padding: 0 24px;

		.atss-header-left {
			display: flex;
			align-items: center;
			height: 100%;
		}

		.atss-header-right {
			display: flex;
			align-items: center;
			height: 100%;
		}

		.atss-header-col {
			display: flex;
			align-items: center;
			border-right: 1px solid #f0f0f0;
			padding: 0 24px;
			height: 100%;
			min-height: 60px;

			&:first-child {
				padding-left: 0;
			}
		}

		.atss-header-col-logo {
			border-right: none;
			&:only-child {
				border-right: none;
			}
			@media (min-width: 960px) {
				border-right: 1px solid #f0f0f0;
			}
		}

		.atss-header-col-categories {
			display: none;
			@media (min-width: 960px) {
				display: flex;
			}
		}

		.atss-header-col-builders {
			display: none;
			@media (min-width: 960px) {
				display: flex;
			}
		}

		.atss-logo {
			a {
				display: inline-block;

				&:focus {
					box-shadow: none;
				}
			}
		}

		.atss-get-pro-version {
			.button {
				padding: 6px 18px;
				font-size: 0.8125rem;
			}
		}
	}

	// List Demos
	.atss-demos {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
		grid-gap: 20px;
		margin-top: 20px;

		.atss-demo-item {
			display: none;
			background: #FFFFFF;
			border-radius: 2px;
			overflow: hidden;

			&:not([data-preview="false"]) {
				cursor: pointer;
			}

			&.atss-demo-item-active {
				display: block;
			}
		}

		.atss-demo-thumbnail {
			background: #ededed;
			position: relative;

			&:before {
				display: table;
				width: 0;
				height: 100%;
				padding-bottom: 67%;
				content: '';
			}

			img {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.atss-demo-preview {
			background: rgba(255,255,255,0.75);
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			text-decoration: none;
			opacity: 0;
			transition: opacity 0.5s;

			span {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 15px 40px;
				background-color: rgba(0, 0, 0, 0.7);
				border-radius: 3px;
				font-size: 0.8125rem;
				color: #FFFFFF;
				transition: background-color 0.5s;
			}
		}

		.atss-demo-item:hover .atss-demo-preview {
			opacity: 1;
		}

		.atss-demo-data {
			border-top: 1px solid #ededed;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 16px;
		}

		.atss-demo-info {
			display: flex;
			align-items: center;
		}

		.atss-demo-name {
			font-weight: 600;
		}

		.atss-demo-badge {
			margin-left: 0.5rem;
		}

		.atss-demo-actions {
			opacity: 0;
			transition: opacity 0.5s;

			.button {
				padding: 2px 16px;
			}
		}

		.atss-demo-item:hover .atss-demo-actions {
			opacity: 1;
		}
	}

	// Import Theme
	.atss-import-theme {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.75);
		visibility: hidden;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999999;
		opacity: 0;
		padding: 20px;
		transition: 0.5s opacity 0s, 0s visibility 0.5s;

		.atss-import-theme-active & {
			visibility: visible;
			opacity: 1;
			transition: 0.5s opacity 0s, 0s visibility 0s;

			.atss-import-overlay {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
			}
		}

		.atss-import-popup {
			position: relative;
			background: #FFFFFF;
			width: 100%;
			max-width: 320px;
			box-shadow: 0px 16px 32px -8px rgba(0, 0, 0, 0.05);
			border-radius: 2px;
			overflow: hidden;
			overflow-y: auto;
		}

		.atss-import-header {
			border-bottom: 1px solid #f0f0f0;
			padding: 12px 24px;
			font-weight: 600;
			color: #1E1E1E;
		}

		.atss-import-subheader {
			font-size: 0.6875;
			text-transform: uppercase;
			color: #697B96;
		}

		.atss-msg-warning {
			font-size: 0.6875rem;
			margin-top: 0.5rem;
			color: #dc3232;
		}

		.atss-import-step {
			display: none;
		}

		.atss-import-step-active {
			display: flex;
			flex-direction: column;
		}

		.atss-import-start {
			.atss-import-plugins {
				padding: 24px;
			}

			.atss-import-content {
				border-top: 1px solid #f0f0f0;
				padding: 24px;
			}

			.atss-import-load {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 40px;

				@keyframes spin {
					100% {
						transform: rotate(360deg);
					}
				}

				&:after {
					animation: spin 4s linear infinite;
					font-family: 'dashicons';
					font-size: 2rem;
					content: "\f113";
				}
			}

			.atss-msg-warning {
				margin: 0;
				padding: 24px;
			}

			.atss-import-actions {
				display: flex;
				justify-content: flex-end;
				border-top: 1px solid #f0f0f0;
				padding: 24px;

				.button {
					padding: 6px 22px;
					margin-right: 0.4rem;
				}
			}
		}

		.atss-import-process {
			.atss-import-output {
				padding: 24px;
			}

			.atss-import-desc {
				color: #1E1E1E;
			}

			.atss-import-progress {
				margin-top: 2rem;
			}

			.atss-import-progress-label {
				font-size: 0.75rem;
				color: #697B96;
				margin-bottom: 0.25rem;

				&:empty {
					display: none;
				}
			}

			.atss-import-progress-bar {
				position: relative;
				width: 100%;
				height: 4px;
				background: #F0F0F0;
				border-radius: 2px;
				overflow: hidden;
			}

			.atss-import-progress-indicator {
				background: #007CBA;
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: var(--atss-indicator);
			}

			.atss-import-progress-sublabel {
				margin-top: 0.5rem;
				font-size: 0.625rem;
				color: #007CBA;
			}
		}

		.atss-import-finish {
			.atss-import-info {
				padding: 76px 24px 24px;
			}

			.atss-import-logo {
				display: flex;
				align-items: center;
				justify-content: center;


				svg {
					display: block;
					margin: 0 auto;
					fill: #DEF3ED;
				}

				// img {
				// 	display: block;
				// }
			}

			.atss-import-title {
				margin-top: 2rem;
				font-size: 1rem;
				font-weight: 600;
				text-align: center;
				color: #1E1E1E;
			}

			.atss-import-desc {
				margin-top: 1rem;
				text-align: center;
				color: #1E1E1E;
			}

			.atss-import-customize {
				margin-top: 1.5rem;
				display: flex;
				align-items: center;
				justify-content: center;

				.button {
					padding: 6px 22px;
				}
			}

			.atss-import-actions {
				display: flex;
				align-items: center;
				justify-content: center;
				border-top: 1px solid #f0f0f0;
				padding: 24px;

				.atss-link {
					margin-right: 1rem;
					text-decoration: none;

					&:hover {
						text-decoration: underline;
					}
				}

				.button {
					padding: 6px 22px;
				}
			}
		}
	}

	.atss-import-theme-active {
		overflow: hidden;
	}

	// Preview
	.atss-preview {
		display: flex;
		flex-direction: column;
		background: #f1f1f1;
		visibility: hidden;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999998;
		opacity: 0;
		transition: 0.5s opacity 0s, 0s visibility 0.5s;

		.atss-preview-active & {
			visibility: visible;
			opacity: 1;
			transition: 0.5s opacity 0s, 0s visibility 0s;
		}

		.atss-preview-iframe {
			width: 100%;
			height: 100%;
		}

		.atss-header {
			margin: 0;
			box-shadow: inset 0px -1px 0px #F0F0F0;
			padding-left: 0px;

			@media (min-width: 960px) {
				padding-left: 24px;
			}

			.button {
				padding: 5px 22px;
			}

			.atss-arrow {
				display: flex;
				align-items: center;
				justify-content: center;
				text-decoration: none;
				color: #000000;
				transition: 0.25s;
				padding: 0 24px;
				height: 100%;
				outline: none;

				&:hover {
					background: #f8f9fa;
				}

				&:focus {
					box-shadow: none;
				}

				&:before {
					font-family: 'dashicons';
					font-size: 18px;
				}

				&.atss-inactive {
					color: #CCCCCC;
					cursor: default;
				}

				&.atss-prev-demo:before {
					content: "\f341";
				}

				&.atss-next-demo:before {
					content: "\f345";
				}
			}

			.atss-header-logo {
				display: none;

				@media (min-width: 960px) {
					display: flex;
				}
			}


			.atss-header-info {
				display: none;

				@media (min-width: 960px) {
					display: flex;
				}
			}

			.atss-header-arrow {
				padding: 0;
			}

			.atss-demo-name {
				font-size: 1rem;
				font-weight: 600;
				color: #000000;
				margin-right: 0.75rem;
			}

			.atss-preview-cancel {
				margin-right: 0.5rem;

				.button:not(:hover) {
					background: transparent;
				}
			}
		}
	}

	.atss-preview-active {
		overflow: hidden;
	}
}