// Clearfix mixin
@mixin clearfix() {
	&:before,
	&:after {
		content: " ";
		display: table;
	}
	
	&:after {
		display: block;
		clear: both;
		height: 1px;
		margin-top: -1px;
		visibility: hidden;
	}
	& {
		*zoom: 1;
	}
}

// Spin animation
@keyframes grouped-metaboxes-spin {
	to {
		transform: rotate(360deg);
	}
}

// Grouped metaboxes
$kalium-acfpro-grouped-metaboxes-prefix: 'kalium-acfpro-grouped-metaboxes';

.#{$kalium-acfpro-grouped-metaboxes-prefix} {
	$tabs-body: #f5f5f5;
	$tabs-width: 22%;
	$tabs-list-height: 45px;
	$tabs-list-links: #666666;
	$tabs-borders: #e5e5e5;
	
	// Container
	&-container {
		background-color: $tabs-body;
		@include clearfix();
		
		&.loaded {
			
			.#{$kalium-acfpro-grouped-metaboxes-prefix}-loading-indicator {
				display: none;
			}
			
			.#{$kalium-acfpro-grouped-metaboxes-prefix}-tabs,
			.#{$kalium-acfpro-grouped-metaboxes-prefix}-body {
				display: block;
			}
		}
	}
	
	// Inner container
	&-inner {
		@include clearfix();
		
		.gutenberg & {
			border-left: 1px solid $tabs-borders;
			border-right: 1px solid $tabs-borders;
		}
	}
	
	// Loading indicator
	&-loading-indicator {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 150px;
	}
	
	// Hide tabs and tabs body
	&-tabs,
	&-body {
		display: none;
		
		// Gutenberg
		.gutenberg & {
			box-sizing: border-box;
		}
	}
	
	// Tabs
	&-tabs {
		list-style: none;
		padding: 0;
		margin: 0;
		width: $tabs-width;
		position: relative;
		float: left;
		z-index: 2;
		min-height: 1px;
		
		li {
			$transition-easing: cubic-bezier(0.390, 0.575, 0.565, 1.000);
			
			display: flex;
			align-items: stretch;
			margin: 0;
			padding: 0;
			height: 0;
			overflow: hidden;
			opacity: 0;
			box-sizing: border-box;
			transition: background-color 250ms $transition-easing, height 250ms $transition-easing, opacity 250ms $transition-easing;
			
			a {
				display: flex;
				flex-grow: 1;
				align-items: center;
				padding: 0 20px;
				color: $tabs-list-links;
				border-bottom: 1px solid $tabs-borders;
				text-decoration: none;
				
				i {
					display: inline-block;
					font-size: 15px;
					margin-right: 10px;
					color: darken($tabs-list-links, 10%);
				}
			}
			
			&.visible {
				opacity: 1;
				height: ($tabs-list-height + 2);
			}
			
			&.active {
				margin-right: -1px;
				
				a {
					background: #fff;
					font-weight: 600;
					color: darken($tabs-list-links, 10%);
					box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .02);
				}
			}
		}
	}
	
	// Tabs body
	&-body {
		width: (100% - $tabs-width);
		border-left: 1px solid $tabs-borders;
		position: relative;
		z-index: 1;
		min-height: 200px;
		box-sizing: border-box;
		background-color: #fff;
		float: left;
		
		// Tab entry
		.tab-entry {
			display: none;
			
			> .acf-postbox {
				// Forecully show acf postbox
				display: block !important;
			}
			
			&.active {
				display: block;
			}
			
			// Hide header
			> .postbox {
				border: none;
				box-shadow: none;
				
				> .hndle,
				> .handlediv,
				> .postbox-header {
					display: none;
				}
			}
			
			// Prevent hidden metaboxes
			.inside {
				display: block;
			}
			
			// Tab groups
			.acf-tab-wrap {
				background-color: #fff;
				
				.acf-tab-group {
					border-bottom: 1px solid $tabs-borders;
					padding: 0;
					margin-top: 1px;
					padding-left: 10px;
					
					li {
						position: relative;
						
						a {
							background: none;
							border: 0;
							line-height: $tabs-list-height;
							font-weight: normal;
							font-size: 13px;
							padding: 0 15px;
							margin: 0;
							position: relative;
							outline: none;
							margin-bottom: 0;
							color: $tabs-list-links;
							box-shadow: none;
							transition: all 250ms;
							
							&:hover {
								color: darken($tabs-list-links, 20%);
							}
							
							&:after {
								content: '';
								display: block;
								height: 3px;
								background: #0073aa;
								position: absolute;
								top: 100%;
								left: 0;
								right: 0;
								opacity: 0;
								transition: all 250ms ease-in-out;
							}
						}
						
						+ li {
							
							&:before {
								position: absolute;
								height: 15px;
								width: 1px;
								background: $tabs-borders;
								top: 50%;
								left: 0%;
								margin-left: -1px;
								content: '';
								transform: translateY(-50%);
							}
						}
						
						&.active {
							
							a {
								
								&:after {
									opacity: 1;
								}
							}
						}
					}
				}
			}
		}
		
		// Retina image
		.retina-thumbnail {
			
			.acf-image-uploader[data-preview_size="medium"] {
				max-width: 150px;
			}
		}
	}
}

// Grouped metaboxes header
#kalium-acfpro-grouped-metaboxes {
	
	// Header
	> h2.hndle {
		> span {
			display: block;
			padding: 16px 20px;
		}
		
		.panel-loading-indicator {
			position: relative;
			display: inline-block;
			overflow: hidden;
			line-height: 0px;
			width: 0px;
			top: 2px;
			transition: all 300ms ease-in-out;
			opacity: 0;
		}
	}
	
	// Toggle
	> .handlediv {
		position: relative;
		top: 15px;
		width: 60px;
	}
	
	// Handle
	> .postbox-header {
		padding: 16px 20px;
		
		.hndle {
			justify-content: flex-start;
			
			.panel-loading-indicator {
				display: block;
				overflow: hidden;
				transition: all 350ms ease-in-out;
				opacity: 0;
				max-width: 0;
				
				.loading-icon {
					margin-right: 10px;
					animation: grouped-metaboxes-spin 1.5s linear infinite;
				}
			}
		}
	}
	
	.handle-actions {
		
		.handle-order-higher,
		.handle-order-lower {
			//display: none;
		}
	}
	
	// Body
	> .inside {
		padding: 0;
		margin: 0;
	}
	
	// Loading state
	&.is-loading {
		
		> h2.hndle .panel-loading-indicator {
			width: 25px;
			opacity: 1;
		}
		
		> .postbox-header .panel-loading-indicator {
			max-width: 100px;
			opacity: 1;
		}
	}
}

// Hide loading indicator for screen settings of Parameters and Options
#screen-options-wrap label[for="kalium-acfpro-grouped-metaboxes-hide"] .panel-loading-indicator {
	display: none;
}

// Portfolio item type
$portfolio-item-type-prefix: 'kalium-acfpro-portfolio-item-type';

.#{$portfolio-item-type-prefix} {
	
	// Images select wrapper
	&-images {
		padding-top: 10px;
		position: relative;
		padding-right: 5px;
		padding-bottom: 10px;
		@include clearfix();
		
		// Loader
		$loader-bg: #fff;
		$loader-color: #00b19d;
		$loader-opacity: 0.3;
		$loader-size: 32px;
		$loader-thickness: 3px;
		
		.loader {
			top: 50%;
			left: 50%;
			position: absolute;
			border-top: $loader-thickness solid rgba($loader-color, $loader-opacity);
			border-right: $loader-thickness solid rgba($loader-color, $loader-opacity);
			border-bottom: $loader-thickness solid rgba($loader-color, $loader-opacity);
			border-left: $loader-thickness solid $loader-color;
			visibility: hidden;
			opacity: 0;
			transform: translate(-50%, -50%, 0%);
			animation: load8 0.8s infinite linear;
			transition: all 350ms ease-in-out;
			z-index: 100;
		}
		
		.loader,
		.loader:after {
			border-radius: 50%;
			width: $loader-size;
			height: $loader-size;
		}
		
		&:before {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 10px;
			background: rgba($loader-bg, 0.4);
			display: block;
			content: '';
			visibility: hidden;
			opacity: 0;
			border-radius: 3px;
			transition: all 150ms ease-in-out;
		}
		
		// Loading
		&.is-loading {
			
			&:before,
			.loader {
				visibility: visible;
				opacity: 1;
			}
		}
		
		// Hide select input when initialized
		~ .acf-input {
			display: none;
		}
	}
	
	// Options
	&-option {
		float: left;
		display: block;
		width: 25%;
		padding: 0 10px;
		text-decoration: none;
		box-sizing: border-box;
		
		span {
			position: relative;
			display: block;
			padding-top: ( 180/361 ) * 100%;
			background-color: #fafafa;
		}
		
		img {
			max-width: 100%;
			display: block;
			transition: all 280ms ease-in-out;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			opacity: 0;
			background: #f9f9f9;
			border: 1px solid #7e8993;
			transition-duration: .25s;
			border-radius: 3px;
			overflow: hidden;
			text-decoration: none;
			
			&.loaded {
				opacity: 1;
			}
		}
		
		strong {
			display: block;
			text-align: center;
			color: #888;
			margin-top: 8px;
			font-size: 12px;
			font-weight: normal;
		}
		
		&:focus {
			box-shadow: none;
			-webkit-box-shadow: none;
		}
		
		&.active {
			
			img {
				border-color: #00b19d;
				box-shadow: 0px 0px 0px 1px #00b19d;
			}
			
			strong {
				color: #00b19d;
				font-weight: 600;
			}
		}
		
		&:nth-of-type(n+5) {
			margin-top: 20px;
		}
	}
	
	// Warning container
	&-warning {
		padding: 10px 15px;
		background: #FFE7B6;
		border-radius: 3px;
		margin: 0 10px;
		display: none;
		margin-top: 10px;
	}
}
