@use "../../common/breakpoints" as *;
@use "../../common/mixins/utilities" as *;
@use "../../common/variables" as *;

//
// Atum Dashboard
//----------------

@use "sass:math";

$header-bg:                 var(--blue-light);
$header-height:             300px;
$add-widget-color:          var(--gray-500);
$widget-bg:                 var(--dash-card-bg);
$widget-icon:               var(--wp-gray-5);
$widget-controls:           var(--dash-card-text);
$widget-controls-hover:     var(--primary);

@mixin dash-widget-header-before() {
	content: '...';
	color: var(--dash-widget-icon);
	font-size: 63px;
	@include vertical-align-absolute;
	left: 21px;
	letter-spacing: -4px;
	transform: rotate(90deg) translateY(-50%);
	transform-origin: 16px -1px;
}

// Style the WP notices
body.toplevel_page_atum-dashboard {
	#wpbody-content {
		padding-bottom: 0;
		> .notice-error, > .notice-info, > .notice-success, > .notice-warning, > .error, > .updated, > .notice{
			margin: math.div($grid-gutter-width, 2) math.div($grid-gutter-width, 2) math.div($grid-gutter-width, 2) 0;
		}
	}
}

#wpfooter {
	position: relative;
}

.atum-dashboard {
	margin-left: -20px;
	text-align: center;
	
	&.overlay {
		&:before {
			content: '';
			@include overlay($zindex: 100);
			left: -20px;
		}
	}
	
	a {
		text-decoration: none;
		
		&:focus {
			box-shadow: none;
		}
	}
	
	.btn {
		text-transform: uppercase;
		box-shadow: none;
	}
	
	// Dashboard Header
	.dash-header {
		position: relative;
		height: $header-height;
		background: $header-bg url('#{$atum-img-path}dashboard/header-bg.png') center bottom;
		background-size: cover;
		@include vertical-align-flex();
		flex-wrap: wrap;
		
		h3 {
			color: var(--main-title);
		}
		
		.dash-header-buttons {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			padding: math.div($grid-gutter-width, 2);
			text-align: left;
			
			@include tablet-max {
				right: 0;
			}
			
			.restore-defaults {
				position: absolute;
				top:  8px;
				right: math.div($grid-gutter-width, 2);
				border-radius: 50%;
				width: 36px;
				height: 36px;
				font-size: 18px;
				
				i {
					margin-left: -2px;
				}
			}
		}
		
		img {
			max-width: 320px;
			margin-bottom: 5px;
			
			@include mobile-max {
				max-width: 220px;
			}
		}
		
		h3 {
			font-size: 21px;
			font-weight: 200;
			width: 100%;
			margin: 0;
			
			@include mobile-max {
				font-size: 15px;
			}
		}
		
		.atum-version {
			color: var(--atum-version);
			background-color: var(--atum-version-bg);
			border-radius: 30px;
			padding: 1px 15px;
			font-weight: 100;
			font-size: 12px;
			margin-top: 10px;
			display: inline-block;
		}
		
		.dash-header-notice {
			position: absolute;
			bottom: 0;
			left: 0;
			padding-left: math.div($grid-gutter-width, 2);
			padding-bottom: 5px;
			font-size: 11px;
			color: var(--main-title);
			font-weight: 300;
			
			span {
				color: var(--primary);
				margin-right: 5px;
			}
			
			.wc-rating-link {
				color: var(--primary);
			}
			
			@include tablet-max {
				right: 0;
			}
			
			@include mobile-max {
				font-size: 10px;
				line-height: 1.3;
			}
			
		}
		
	}
	
	// Dashboard Cards
	.dash-cards {
		
		@include mobile-min {
			display: flex;
		}
		
		.dash-card {
			
			&.dash-marketing-banner {
				width: 100%;
				min-height: 200px;
				margin: 20px 30px 0;
				background-color: var(--dash-card-bg);
				background-size: cover !important;
				
				&.wide {
					
					.marketing-close {
						right: 30px;
						top: 20px;
					}
					
					.mp-logo {
						position: absolute;
						top: 50px;
						left: 70px;
					}
					
					.content {
						.content-description {
							width: 100%;
						}
						.content-buttons {
							width: auto;
						}
					}
					
					iframe {
						border-radius: 5px;
					}
				}
				
				.marketing-close {
					right: 0;
					font-size: 20px;
					font-weight: 100;
					line-height: 30px;
					color: var(--dash-card-text);
					cursor: pointer;
					margin: 0 10px;
					position: absolute;
					
					&:hover {
						color: var(--primary);
					}
				}
				
				.image {
					width: 100px;
					height: auto;
					position: absolute;
					top: 0;
					left: 0;
					margin: 10px 10px;
				}
				
				.content {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 20px;
					min-height: 200px;
					
					&.with-top-image {
						padding-left: 72px;
					}
					
					&.with-content {
						padding-left: 100px;
					}
					
					@include tablet-max {
						flex-wrap: wrap;
						padding: 100px 20px;
					}
					
					.content-description {
						width: 59%;
						
						@include tablet-max {
							width: 100%;
						}
						
						h1 {
							font-weight: 400;
							font-size: 40px;
							margin: 20px 0 5px;
							line-height: 1.1;
							letter-spacing: 1px;
							
							> span {
								position: relative;
							}
							
							strong {
								font-weight: 600;
							}
							
							span {
								font-weight: 300;
							}
						}
						
						h1 {
							color: var(--main-title) !important;
						}
						
						p {
							color: var(--dash-card-text) !important;
						}
						
						h1, p {
							text-align: left !important;
							padding: 0 15px;
							
							@include tablet-max {
								text-align: center !important;
							}
							
						}
						
						.version {
							padding: 1px 9px;
							line-height: 20px;
							border-radius: 11.5px;
							position: absolute;
							top: -14px;
							right: -15px;
							font-size: 14px;
						}
						
						.footer-notice {
							font-size: 10px;
							color: $black;
							border-radius: 5px;
							padding: 5px 10px;
							max-width: 445px;
							margin-left: math.div($grid-gutter-width, 2);
						}
						
					}
					
					.content-buttons {
						width: 256px;
						display: block;
						float: right;
						margin-left: auto;
						
						@include tablet-max {
							float: none;
							margin: 0;
						}
						
						button {
							max-width: 300px;
							width: 100% !important;
							border: 1px solid;
							
							&:first-of-type {
								margin-bottom: 10px;
							}
							
							&.btn-success, &.btn-success:focus, &.btn-outline-success, &.btn-outline-success:focus {
								box-shadow: none;
								
								//&.purple:hover {
								//	opacity: 0.7;
								//}
							}
							
							&.btn-outline-success {
								background: var(--white);
								
								&:hover {
									background: var(--tertiary-var);
								}
								
								//&.purple {
								//	background: $white;
								//	color: $purple-pl;
								//	border-color: $purple-pl;
								//
								//	&:hover {
								//		background: $purple-pl;
								//		color: $white;
								//		border-color: $purple-pl;
								//	}
								//}
							}
						}
						
					}
					
				}
				
				.mp-logo {
					width: 215px;
					height: auto;
				}
				
			}
		}
		
	}
	
	// Add Widget Zone
	.add-dash-widget {
		border: 1px dashed var(--dash-add-widget-color);
		border-radius: 5px;
		margin: $grid-gutter-width $grid-gutter-width 0;
		min-height: 180px;
		@include vertical-align-flex();
		cursor: pointer;
		transition: .15s ease-in-out;
		
		i, h2 {
			display: inline-block;
			vertical-align: middle;
			color: var(--dash-add-widget-color);
			transition: .15s ease-in-out;
			user-select: none;
		}
		
		i {
			margin-right: 4px;
			font-weight: bold;
			font-size: 16px;
		}
		
		&:hover {
			border-color: var(--dash-add-widget-color-dark);
			
			i, h2 {
				color: var(--dash-add-widget-color-dark);
			}
		}
		
		h2 {
			font-size: 18px;
			margin: 0;
		}
	}
	
	// Widgets
	.atum-widgets {
		padding: 0 math.div($grid-gutter-width, 2);
	}
	
	.atum-widget {
		margin-bottom: $grid-gutter-width;
		
		.widget-wrapper {
			background-color: $widget-bg;
			border-radius: 5px;
			box-shadow: 0 3px 2px var(--gray-200);
			border: 1px solid var(--gray-400);
		}
		
		.widget-header, .widget-body {
			padding: 14px;
		}
		
		.widget-header {
			border-bottom: 1px solid var(--gray-400);
			text-align: left;
			cursor: move;
			position: relative;
			display: flex;
			align-items: center;
			
			&:before {
				@include dash-widget-header-before;
			}
			
			h2, i {
				user-select: none;
			}
			
			h2 {
				margin: 10px 10px 9px 15px;
				font-size: 18px;
				font-weight: bold;
				flex-grow: 1;
				color: var(--main-title);
			}
			
			i {
				font-size: 20px;
				color: $widget-controls;
				display: inline-block;
				cursor: pointer;
				margin-left: 3px;
				transition: color 0.2s ease-in-out;
				
				&:hover {
					color: $widget-controls-hover;
				}
				
				// TODO: For the next version
				&.widget-settings {
					display: none;
				}
			}
			
		}
		
		.widget-body {
			p.error {
				color: $widget-text;
				font-size: 17px;
				@include vertical-align-absolute;
				max-width: 85%;
				margin: auto;
				left: 0;
				right: 0;
			}
			
			> .overlay {
				&:before {
					content: '';
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					z-index: 10;
					background-color: var(--gray-100);
					opacity: 0.5;
				}
				
				&:after {
					content: '';
					top: 45%;
					left: 0;
					right: 0;
					margin: auto;
					@include loader(50px, $info, 3px);
					border-top-color: var(--gray-600);
				}
			}
		}
		
		// Widget config
		.widget-config {
			display: none;
			
			.form-field {
				margin: math.div($grid-gutter-width, 2) auto;
				
				label {
					display: block;
					margin-bottom: 10px;
				}
				
				.nice-select {
					width: 120px;
					max-width: 98%;
					margin: auto;
				}
			}
			
			.config-controls {
				border-top: 1px solid var(--light);
				padding-top: math.div($grid-gutter-width, 2);
			}
		}
		
		.widget-primary {
			color: var(--blue);
		}
		
		.widget-success {
			color: var(--success);
		}
		
		.widget-warning {
			color: var(--warning);
		}
		
		.widget-danger {
			color: var(--danger);
		}
		
		@include tablet-max {
			margin-bottom: math.div($grid-gutter-width, 2) !important;
		}
		
		@include mobile-max {
			min-height: 345px !important;
			
			&.atum_statistics_widget {
				min-height: 460px !important;
			}
			
			&.atum_stock_control_widget {
				min-height: 400px !important;
			}
			
			&.atum_videos_widget {
				min-height: 480px !important;
			}
			
		}
	}
	
	// Owl carousel styling
	.owl-dots {
		margin-top: -10px !important;
		margin-bottom: math.div($grid-gutter-width, 2);
		
		.owl-dot {
			span {
				width: 8px;
				height: 8px;
				margin-right: 3px;
				margin-left: 3px;
				border: 1px solid $widget-icon;
				background-color: transparent;
				box-sizing: border-box;
			}
			
			&.active {
				span {
					background-color: $widget-icon;
				}
			}
		}
	}
	
	.scroll-box {
		overflow: hidden;
	}
	
	.nicescroll-rails {
		border-radius: 3px;
		margin-left: 10px;
	}
	
}

// Add widget popup
.add-widget-popup {
	padding-left: 0 !important;
	padding-right: 0 !important;
	min-height: 0 !important;
	max-width: 98%;
	overflow: hidden;
	background-color: var(--atum-expanded-bg) !important;
	
	&.overlay {
		&:before {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: 10;
			background-color: var(--gray-100);
			opacity: 0.5;
		}
		
		&:after {
			content: '';
			top: 45%;
			left: 0;
			right: 0;
			margin: auto;
			@include loader(50px, $info, 3px);
			border-top-color: var(--atum-text-color-var1);
		}
	}
	
	.swal2-html-container {
		margin-bottom: 0;
	}
	
	h2.swal2-title {
		position: relative;
		font-size: 17px;
		text-align: left;
		color: var(--atum-add-widget-title);
		border-bottom: 1px solid var(--atum-add-widget-separator);
		padding: 20px;
		margin: math.div($grid-gutter-width, -2) 0 0;
	}
	
	h3 {
		color: var(--atum-add-widget-title);
	}
	
	.swal2-close {
		color: var(--atum-text-color-var1);
		font-weight: 200;
		font-size: 32px;
		line-height: 1.7;
		
		&:hover {
			color: var(--primary);
		}
	}
	
	.widgets-list {
		margin-top: 5px;
		margin-bottom: 0;
		margin-right: 8px;
		padding-right: 5px;
		max-height: 390px;
		
		li {
			width: 90%;
			padding: 12px 0;
			margin: auto;
			display: flex;
			align-items: center;
			border-bottom: 0.5px solid var(--dash-widget-list-border);
			
			&:first-child {
				padding-top: 3px;
			}
			
			&:last-child {
				border-bottom: none;
			}
			
			&.added {
				.add-widget {
					display: none;
				}
			}
			
			&.not-added {
				.btn-info {
					display: none;
				}
			}
			
			// Fix for strange shadow below button
			button {
				&, &:hover, &:focus, &:active {
					display: inline-block;
				}
			}
			
			@include mobile-max {
				flex-wrap: wrap;
				border-bottom: none;
				padding-bottom: 0;
			}
			
		}
		
		.widget-details {
			text-align: left;
			margin: 0 10px;
			flex-grow: 1;
			
			h3 {
				font-size: 15px;
				margin: 0;
			}
			
			p {
				text-align: left;
				font-size: 12px;
				color: $widget-text;
				margin-top: 4px;
			}
			
			@include mobile-max {
				padding-top: 10px;
				margin-left: 0;
				max-width: 70%;
			}
		}
		
		img {
			max-width: 120px;
			border-radius: 4px;
			
			@include mobile-max {
				max-width: 100%;
			}
		}
		
		.coming-soon {
			img {
				max-width: 100%;
			}
		}
		
	}
	
}

.swal2-container {
	.nicescroll-rails {
		border-radius: 3px;
		margin-left: math.div($grid-gutter-width, -2);
		margin-top: 7px;
	}
}

@include loader-rotate-animation;