@import "compass";

/* Utilities */
$break-small: 40.063em;
$break-medium: 64.063em;
$break-large: 75em;
$break-xlarge: 90.063em;

@mixin min-break($size) {
	@media only screen and (min-width: $size) { @content; }
}
@mixin max-break($size) {
	@media only screen and (max-width: $size) { @content; }
}
/* Admin Popup */
.opvis {
	opacity: 1 !important;
	visibility: visible !important;
}

.nt {
	transform: none !important;
}
#thb-adm-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .5);
	z-index: 99999999;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 300ms ease;
	will-change: opacity, visibility;
	opacity: 0;
	visibility: hidden;
}
.thb-popup-box {
	border-radius: 3px;
	padding: 30px;
	width: 100%;
	margin: 0 7.5px;
	background: white;
	max-width: 600px;
	position: relative;
	.thb-popup-close {
		display: flex !important;
		cursor: pointer;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: black;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: -15px;
		top: -15px;
		z-index: 1;
		span {
			font-size: 16px;
			color: white;
			transform: translateY(2px);
		}
	}
	figure {
		height: 300px;
		display: flex;
		align-items: flex-start;
		overflow: hidden;
		margin: -30px;
		margin-bottom: 30px;
		border-radius: 3px 3px 0 0;
		position: relative;

		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: top;
		}
		.thb-import-loading {
			will-change: opacity, visibility;
			opacity: 0;
			visibility: hidden;
			transition: all .3s ease;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: rgba(0, 0, 0, .5);

			.thb-loading-text {
				display: block;
				text-align: center;
				color: #fff;
				font-size: 12px;
				margin-top: 20px;
			}
		}

	}
	p {
		margin-top: -5px;
		margin-bottom: 20px;
	}
	form {
		&.thb-loading {
			pointer-events: none;
		}
	}
}
.thb-check-line {
	margin-left: -10px;
	margin-right: -10px;
	display: flex;
	> div {
		margin: 0 10px;
		flex: 1;
		.child-check {
			font-size: 12px;
			margin-left: 15px;
			margin-top: 12px;
			display: none;
			input {
				width: 14px;
				min-width: 14px;
				height: 14px;
				margin-right: 7.5px;
				margin-top: 3px;
				&:checked::before {
					font-size: 19px;
				}
			}
			&.done {
				display: flex;
			}
		}
	}
	label {
		vertical-align: inherit;
	}
	margin-bottom: 20px;
}
/* Styles */
.about-wrap {
	h2.nav-tab-wrapper {
		margin-bottom: 50px;
	}
	.theme-browser {
		h2 {
			text-align: left;
		}
		.theme-actions {
			.dashicons-share-alt2 {
				position: relative;
				top: 3px;
			}
		}
		.theme {
			width: 30.6% !important;
			.theme-actions {
				top: auto;
				transform: translateY(0);
				bottom: 0;
			}
			&:nth-child(3n){
				margin: 0 4% 4% 0;
			}
			&:nth-child(4n):not(.last) {
			  margin: 0 4% 4% 0;
			}

			&.last {
				margin: 0 !important;
			}
			.theme-screenshot {
				cursor: default;
			}
			&.disabled {
				opacity: 0.25;
				pointer-events: none;
				user-select: none;
			}
			img {
				border: 0;
			}
			.notice {
				display: block !important;
			}
		}
	}
	.button {
		&.thb-generate,
		&.thb-register {
			padding: 0 25px;
			line-height: 46px;
			font-weight: 600;
			height: 46px;
			font-size: 16px;
		}
		&.button-update {
			background: #d54e21;
		  color: #fff;
		  border-color: darken(#d54e21, 10%);
		  box-shadow: 0 1px 0 darken(#d54e21, 10%);

		  .dashicons {
		  	line-height: 26px;
		  }
		  &:hover {
		  	background: lighten(#d54e21, 5%);
		  	color: #fff;
		  	border-color: darken(#d54e21, 5%);
		  	box-shadow: 0 1px 0 darken(#d54e21, 5%);
		  }
		}
	}

	.wp-badge.wp-thb-badge {
		background: #575be9 url('../img/admin/admin_logo.png') center 25px no-repeat;
		background-size: 80px 80px;
	}
	.thb-error {
		background: #fff;
		border-left: 4px solid #dc3232;
		box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
		margin: 0 0 50px 0;
		padding: 1px 0 1px 12px;
		font-size: 13px;
		line-height: 20px;

		p {
			padding: 2px;
	    margin: 7px 0;
	    line-height: 1.5;
	    font-size: 14px;

	    a {
	    	font-weight: 600;
	    }
		}
	}
	.thb-demo-import {
		.theme {
			.theme-screenshot {
				.loading {
					display: none;
					flex-direction: column;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					justify-content: center;
					align-items: center;
					z-index: 20;
					background: rgba(#fff,0.8);
					font-size: 14px;
					&:before {
						content: "\f463";
						font: 400 30px/1 dashicons;
						animation: rotation 2s infinite linear;
						margin-bottom: 10px;
					}
				}
			}
			&.loading {
				.theme-screenshot {
					.loading {
						display: flex;
					}
				}
			}
		}
	}
	table.widefat {
		font-size: 16px;
		margin-bottom: 40px;
		thead {
			td {
				font-size: 16px;
				font-weight: 600;
			}
		}
		tr {
			td {
				font-size: 14px;
				&:first-child {
					width: 40%;
				}
			}
			&:nth-child(odd) td {
				background: #fcfcfc;
			}
		}
		mark {
			background: none;

			&.yes {
				span {
					color: #49b246;
				}
			}
			&.error {
				color: #d54e21;
				font-weight: 600;
			}
		}
	}

}
li.toplevel_page_thb-product-registration img {
	padding-top: 6px !important;
}
/* Registration */
.thb-registration {
	.postbox {
		padding: 15px;

		@include min-break($break-small) {
			padding: 40px;
		}
		p {
			margin: 0 0 40px;
		}
	}
	.steps2 {
		display: flex;
		flex-flow: row wrap;
		margin: 0 -20px;
		.thb-box {
			display: flex;
			box-sizing: border-box;
			padding: 0 20px;
			flex: 0 0 100%;
			max-width: 100%;

			&.thb-left {
				@include min-break($break-small) {
					flex: 0 0 40%;
					max-width: 40%;
				}
				figure {
					img {
						border: 0;
						box-shadow: 0;
						max-width: 282px;
					}
				}
			}
			&.thb-right {
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
				@include min-break($break-small) {
					flex: 0 0 60%;
					max-width: 60%;
				}
				h2 {
					margin-top: 0;
				}
				strong {
					display: block;
					background: #f2f2f2;
					font-size: 18px;
					font-weight: 600;
					height: 56px;
					line-height: 56px;
					padding: 0 20px;
					border-radius: 3px;
					margin-bottom: 22px;
					overflow: hidden;
					text-overflow: ellipsis;
					box-sizing: border-box;
					max-width: 100%;
					white-space: nowrap;
				}
				.button {
					display: inline-flex;

					& + .button {
						margin-left: 10px;
					}
				}
			}
		}
	}
	.steps {
		display: flex;
		flex-flow: row wrap;
		margin: 0 -20px;
		li {
			display: flex;
			box-sizing: border-box;
			padding: 0 20px;
			flex: 0 0 100%;
			max-width: 100%;
			@include min-break($break-small) {
				flex: 0 0 50%;
				max-width: 50%;
			}
			.thb-form {
				display: flex;

				[type="text"] {
					flex: 1;
					height: 46px;
					line-height: 46px;
					padding: 0 20px;
					margin-right: 10px;
					border-radius: 3px;
				}
			}
			.step {
				padding: 20px;
				border: 1px solid #f1f1f1;
				text-align: center;
				width: 100%;
				position: relative;

				@include min-break($break-small) {
					padding: 40px;
				}
				.thb_error_messages {
					max-width: 600px;
					margin: 0 auto;
				}
				.thb-error {
					margin-bottom: 0;
					margin-top: 10px;
					text-align: left;
					p {
						padding: 2px;
				    margin: 7px 0;
				    line-height: 1.5;
				    font-size: 14px;
					}
				}
				figure {
					display: flex;
					width: 100%;
					padding: 0;
					margin: 0;
					height: 340px;
					align-items: center;
					justify-content: center;
					img {
						border: 0;
						box-shadow: none;
						max-width: 50%;
					}
				}
				.count {
					display: block;
					background: #919493;
					font-size: 11px;
					text-transform: uppercase;
					color: #fff;
					font-weight: 600;
					border-radius: 2px;
					line-height: 26px;
					padding: 0 9px;
					position: absolute;
					top: 20px;
					left: 20px;

					&.large {
	          width: 65px;
	          line-height: 50px;
	          background: #c9c9c9;
	          font-size: 16px;
	          top: 0;
	          left: 50%;
	          @include translate3d(-50%,-50%,0);
	          @include box-shadow(0 0 0 20px #fff);
	        }
	      }
			}
			&:nth-child(3) {
			  margin-top: 60px;
			  @include min-break($break-small) {
			  	flex: 0 0 100%;
			  	max-width: 100%;

			  }
			  .step {
	        @include min-break($break-small) {
	        	padding: 10%;
	        }
	      }

	      .thb-form {
	        max-width: 600px;
	        margin: 0 auto;
	        align-items: center;

	        svg {
	        	margin-right: 20px;
	        }
	      }
	    }
		}

	}
}
/* Media Screen */
.compat-attachment-fields {
	.compat-field-thb-masonry-image-size {
		.label {
			margin-right: 0;
		}
		.field {
			select {
				width: 100%;
			}
		}
	}
}
/* Misc */
.vc-license-activation-notice,
.yith_banner,
#icl_div .icl_cyan_box,
.rs-update-notice-wrap,
#option-tree-logo {
	display: none !important;
}

.thb_menu_options {
	float: left;
	width: 100%;
}
.thb_menu_options h2 {
	font-size: 16px;
}
.thb_menu_options h3 {
	font-size: 12px;
	text-transform: uppercase;
}
.menu-item-depth-1 .thb-field-link-mega,
.menu-item-depth-2 .thb-field-link-mega,
.menu-item-depth-3 .thb-field-link-mega,
.menu-item-depth-4 .thb-field-link-mega,
.menu-item-depth-1 .thb-field-link-mega-style,
.menu-item-depth-2 .thb-field-link-mega-style,
.menu-item-depth-3 .thb-field-link-mega-style,
.menu-item-depth-4 .thb-field-link-mega-style  {
	display: none;
}
.thb-field-link input[type=text] {
	height: 28px;
}
.thb_menu_options select {
	max-width: 100%;
}
/* Widgets */
.thb-widget-image-holder {
	width: 90px;
	height: 90px;
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 50%;
	}
}
/* Option Tree */
#adminmenu li#toplevel_page_ot-settings.menu-top {
	display: none !important;
}

#option-tree-header .theme_link {
	display: block;
	    float: left;
	    height: 24px;
	    line-height: 24px;
	    padding: 3px 12px 3px 12px;
}
#option-tree-header .theme_link.right {
	float: right;
}
#option-tree-sub-header {
	h2 {
		display: inline-block;
		margin: 5px;
		line-height: 29px;
		span {
			display: inline-block;
			vertical-align: text-top;
			margin-left: 15px;
			background: #008ec2;
			color: #fff;
			line-height: 1;
	    border-radius: 9px;
	    padding: 4px 8px;
			font-size: 10px;
			font-weight: 600;
			text-transform: uppercase;
		}
		a {
			color: #222;
			opacity: 0.4;
			text-decoration: none;
			&.active {
				opacity: 1;
			}
			&:hover {
				opacity: 1;
			}
		}
	}
}
#option-tree-settings-api .description h3,
#option-tree-settings-api .format-setting-label .label,
#poststuff .format-setting-label .label {
	margin: 0;
}
.wrap.settings-wrap .ui-tabs-nav li a,
.ot-theme-option-tabs.ui-tabs .ot-theme-option-nav.ui-tabs-nav li a {
	outline: none;
	box-shadow: none;
}

.ot-metabox-tabs.ui-tabs {
	a {
		&:focus {
			box-shadow: none;
		}
	}
}
.ui-datepicker.ui-datepicker-multi-2,
.ui-datepicker.ui-datepicker-multi-3 {
  width: auto !important;

	.ui-datepicker-group,
	.ui-datepicker-header {
		width: auto !important;
	}
}
.format-setting-wrap {
	.select-wrapper {
		select.option-tree-ui-select {
			padding-right: 30px !important;
		}
	}
}
.option-tree-ui-colorpicker-input-wrap .wp-color-result:after,
.option-tree-ui-colorpicker-input-wrap .wp-color-result-text {
	line-height: 28px !important;
}
#setting_header_trending_icon .type-radio-image .option-tree-ui-radio-images img,
#setting_mobile_menu_icon_style .type-radio-image .option-tree-ui-radio-images img,
#setting_header_color .type-radio-image .option-tree-ui-radio-images img,
#setting_subheader_color .type-radio-image .option-tree-ui-radio-images img,
#setting_mobile_header_color .type-radio-image .option-tree-ui-radio-images img,
#setting_fixed_header_color .type-radio-image .option-tree-ui-radio-images img,
#setting_full_menu_dropdown_color .type-radio-image .option-tree-ui-radio-images img,
#setting_mobile_menu_color .type-radio-image .option-tree-ui-radio-images img,
#setting_footer_color .type-radio-image .option-tree-ui-radio-images img,
#setting_subfooter_color .type-radio-image .option-tree-ui-radio-images img,
#setting_lightbox_color .type-radio-image .option-tree-ui-radio-images img,
#setting_newsletter_lightbox_color .type-radio-image .option-tree-ui-radio-images img {
  width: 30px;
  opacity: 1;
}
#setting_subheader_color .type-radio-image .option-tree-ui-radio-images img,
#setting_header_color .type-radio-image .option-tree-ui-radio-images img,
#setting_mobile_header_color .type-radio-image .option-tree-ui-radio-images img,
#setting_fixed_header_color .type-radio-image .option-tree-ui-radio-images img,
#setting_full_menu_dropdown_color .type-radio-image .option-tree-ui-radio-images img,
#setting_mobile_menu_color .type-radio-image .option-tree-ui-radio-images img,
#setting_footer_color .type-radio-image .option-tree-ui-radio-images img,
#setting_subfooter_color .type-radio-image .option-tree-ui-radio-images img,
#setting_lightbox_color .type-radio-image .option-tree-ui-radio-images img,
#setting_newsletter_lightbox_color .type-radio-image .option-tree-ui-radio-images img {
	border-radius: 50%;
}

#setting_header_style .type-radio-image .option-tree-ui-radio-images img,
#setting_footer_columns .type-radio-image .option-tree-ui-radio-images img,
#setting_subfooter_style .type-radio-image .option-tree-ui-radio-images img,
#setting_widget_style .type-radio-image .option-tree-ui-radio-images img,
#setting_article_style .type-radio-image .option-tree-ui-radio-images img,
#setting_post_style .type-radio-image .option-tree-ui-radio-images img,
#setting_post_gallery_style .type-radio-image .option-tree-ui-radio-images img,
#setting_archive_layout .type-radio-image .option-tree-ui-radio-images img,
#setting_category_layout .type-radio-image .option-tree-ui-radio-images img,
#setting_widget_style .type-radio-image .option-tree-ui-radio-images img,
#setting_tag_layout .type-radio-image .option-tree-ui-radio-images img,
#setting_search_layout .type-radio-image .option-tree-ui-radio-images img,
#setting_sharing_buttons_top_style .type-radio-image .option-tree-ui-radio-images img,
#setting_sharing_buttons_bottom_style .type-radio-image .option-tree-ui-radio-images img,
#setting_article_related_style .type-radio-image .option-tree-ui-radio-images img,
#setting_author_layout .type-radio-image .option-tree-ui-radio-images img,
#setting_shop_product_listing .type-radio-image .option-tree-ui-radio-images img,
#setting_post_review_style .type-radio-image .option-tree-ui-radio-images img,
#setting_shop_product_style .type-radio-image .option-tree-ui-radio-images img {
	width: 130px;
	opacity: 1;
}

#executive_settings.postbox {
	margin: 25px 0 0;
}
#page-ot_theme_options {
  .ui-tabs {
    #poststuff {
      position: relative;
      #post-body-content {
        opacity: 0;
        max-height: 400px;
        @include transition(all .25s ease);
      }


      &:after {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -74px 0 0 -74px;
        width: 148px;
        height: 148px;
        background: #fff url('../img/admin/ot-preloader.gif') center center;
        background-size: 148px 148px;
        opacity: 1;
        @include transition(all .25s ease);
      }
    }
    &.ui-widget {
      #poststuff {
        #post-body-content {
          opacity: 1;
          max-height: 100%;
        }
        &:after {
          opacity: 0;
          pointer-events: none;
        }
      }
    }
  }
}

/* Reactions */
.taxonomy-thb-reactions {
	.term-icon-wrap {
		display: flex;
		flex-wrap: wrap;
		.thb-icon-wrap {
			display: inline-flex;
			width: 42px;
			height: 42px;
			justify-content: center;
			align-items: center;
			padding: 5px;
			border-radius: 50%;
			margin: 0 5px 5px 0;
			border: 1px solid transparent;
			position: relative;
			box-sizing: border-box;
			.thb-reaction-icon {
				width: 100%;
			}
			span {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				box-sizing: border-box;
				border: 2px solid transparent;
			}
			input[type="radio"] {
				display: none;

				&:checked + span {
					border-color: black;
				}
			}

		}
	}
	.icon.column-icon {
		svg {
			width: 30px;
			height: 30px;
		}
	}
}

/* Radio Image inside Taxonomy */
.thb-radio-images {
	.thb-radio-image {
		float: left;
		margin: 0 10px 10px 0px;

		input[type="radio"] {
			display: none;
		}
		label {
			display: block;
			position: relative;
			line-height: 0;
			border-radius: 2px;
			overflow: hidden;
			img {
				width: 142px;
				position: relative;
				z-index: 10;
				border-radius: 2px;
				pointer-events: none;
			}
			span {
				display: block;
				padding: 5px;
				border-radius: 2px;
				border: 1px solid #ccc;
				cursor: pointer;
				position: absolute;
				z-index: 20;
				top: 0;
				left: 0;
				right: 0;
    		bottom: 0;
				pointer-events: none;
				&:hover {
					border-color: #464646;
				}
			}
			input[type="radio"]:checked + span {
				border-color: #464646;
				@include box-shadow(0 1px 3px rgba(0,0,0,0.05));
			}
		}
	}
}

/* Widgets */
.thb_thumbnail_style_row, .thb_thumbnail_counter_row {
	display: none;
}
/* Gutenberg */
.wp-block {
	max-width: 670px;
}