/* 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; }
}

/* 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 {
			.theme-actions {
				top: auto;
				transform: translateY(0);
				bottom: 0;
			}
			&:nth-child(3n){
				margin: 0 4% 4% 0;	
			}
			&.last {
				margin: 0;	
			}
			.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: #ef2673 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;
			}
		}
	}
	
}

/* 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: 100%;
					}	
				}
			}
			&.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;
				} 
				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: 100%;
					}	
				}
				.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;
				}
			}
		}
	}
}
/* Option Tree */
#adminmenu li#toplevel_page_ot-settings.menu-top {
	display: none !important;
}
#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;
}

/* Misc */
.vc-license-activation-notice,
.yith_banner,
#icl_div .icl_cyan_box,
.rs-update-notice-wrap,
#option-tree-logo {
	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;
}
.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 {
	display: none;
}
.thb-field-link input[type=text] {
	height: 28px;
}
.thb_menu_options select {
	max-width: 100%;
}
#setting_post-gallery-photos .format-setting-label {
  display: none;
}
#setting_post-gallery-photos .format-setting .description {
  float: none;
  width: 100%;
  margin: 0 0 20px;
}
#setting_post-gallery-photos .format-setting .format-setting-inner {
  width: 100%;
}
#setting_post-gallery-photos ul.ot-gallery-list {
  margin-bottom: 20px;
}
#setting_post-gallery-photos ul.ot-gallery-list li {
  margin: 0 5px 10px;
}
#setting_post-gallery-photos ul.ot-gallery-list li img {
  width: 64px;
  height: auto;
}
#setting_header_style .type-radio-image .option-tree-ui-radio-images img,
#setting_footer_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 {
	width: 130px;
	opacity: 1;
}