//
// Atum Export Layout
//-------------------

#wpbody-content {
	
	> .notice {
		display: none;
	}
	
	.wrap {
		> .notice {
			margin-left: 0;
			margin-right: 20px;
		}
	}
}

.wp-heading-inline {
	.btn {
		text-decoration: none;
		text-transform: uppercase;
		margin-left: $grid-gutter-width/2;
	}
}

.atum-export {
	margin-left: -20px;
	margin-bottom: 50px;
	
	&.overlay {
		&:before {
			content: '';
			@include overlay($zindex: 100);
			left: -20px;
		}
	}
	
	h3.ent-title {
		font-size: 16px;
		margin: 0;
	}
	
	.export-section {
		@include atum-panel();
		margin: 20px;
		padding: 20px;
		position: relative;
		
		.export-info {
			font-size: 18px;
		}
		
		.closed {
			padding-bottom: 0;
			
			h4 {
				color: $blue-dark;
				margin-bottom: 10px;
			}
		}
	}
	
	.section-title {
		font-size: 18px;
		text-align: left;
		margin: 0 0 20px 0;
		line-height: 20px;
		color: $blue-dark;
	}
	
	
	// Export Progress
	.export-progress {
		display: flex;
		flex-direction: column;
		height: 232px;
		margin-right: 0;
		
		@include mobile-min  {
			height: 125px;
		}
	}
	
	// Export Content (Wrapper)
	.export-content-wrapper {
		position: relative;
		min-height: 400px;
		margin-top: 20px;
		
		&.overlay {
			&:before {
				content: '';
				@include overlay($zindex: 1000);
				left: 20px;
				right: 0;
			}
			
			&:after {
				content: '';
				top: 45%;
				left: 0;
				right: 0;
				margin: auto;
				@include loader($size: 35px, $color: $info, $border-size: 3px, $zindex: 1001);
			}
		}
	}
	
	.export-content {
		padding: 0 10px;
		min-height: 500px;
		display: flex;
		width: 100%;
		overflow: hidden;
		position: relative;
		
		.export-section {
			margin: 0 10px;
		}
		
		.export-init {
			width: 220px;
			flex-shrink: 0;
		}
		
		.export-selection {
			width: 50%;
		}
		
		.export-summary {
			width: 33.333333%;
		}
		
		.blockUI.blockOverlay {
			right: 20px !important;
			left: 20px !important;
			width: auto !important;
			border-radius: 5px;
		}
		
	}
	
	.rectangle-dashed {
		border-radius: $border-radius-base;
		border: 4px dashed $wp-gray-5;
		text-align: center;
		min-height: 219px;
		color: $wp-gray-5;
		font-size: 18px;
		font-weight: 600;
		position: relative;
		box-sizing: border-box;
		
		> span {
			@include vertical-align-absolute;
			left: 0;
			right: 0;
		}
	}
	
	.export-actions {
		margin-top: 14px;
	}
	
	.export-summary {
		.atum-icon, .export-info {
			text-align: center;
		}
	}
}