@use "sass:color";
@use "sass:map";
@use "../../common/breakpoints" as *;
@use "../../common/mixins/utilities" as *;
@use "../../common/variables" as *;
@use "../pages/dashboard" as *;

//
// "Statistics" widget
//-----------------------

@use "sass:math";

.statistics-widget {
	height: 322px;
	display: flex;
	flex-wrap: wrap;
	
	.mobile-filter-nav {
		display: none;
		margin-left: math.div($grid-gutter-width, -2);
		margin-right:  math.div($grid-gutter-width, -2);
		margin-top: -($grid-gutter-width);
		
		@include mobile-max {
			display: block;
		}
		
		ul {
			background-color: var(--gray-200);
			display: flex;
			
			li {
				display: inline-block;
				padding:  math.div($grid-gutter-width, 2) 10px;
				color: var(--atum-text-color-var1);
				font-size: 15px;
				font-weight: 100;
				transition: .2s ease-in-out;
				
				&:hover, &.active {
					color: var(--tertiary);
				}
				
				span, i {
					display: inline-block;
					vertical-align: middle;
				}
				
				i {
					font-size: 15px;
				}
			}
		}
	}
	
	.chart-filter {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom:  math.div($grid-gutter-width, 2);
		
		@include tablet-max {
			margin-bottom:  math.div($grid-gutter-width, 2);
		}
	}
	
	.filter-controls, .chart-type, .chart-legend {
		@include mobile-max {
			&:not(.visible-filter) {
				display: none;
			}
			
			&.visible-filter {
				animation: fadeInDown .3s map.get($easing, 'ease-in-quad');
				animation-fill-mode: both;
			}
		}
	}
	
	.filter-controls {
		margin: auto;
		display: flex;
	}
	
	.nice-select {
		display: inline-block;
		margin-right: 7px;
		
		&.loading {
			transition: all 0.2s ease-in-out;
			
			.current {
				position: relative;
				padding-right: 10px;
				
				&:after {
					content: '';
					@include loader(10px);
					top: 2px;
					right: -8px;
				}
			}
		}
		
		@include tablet-max {
			font-size: 12px;
			height: 36px;
			line-height: 34px;
		}
	}
	
	.chart-type {
		margin: auto;
		
		svg {
			max-width: 26px;
			max-height: 26px;
			fill: var(--atum-text-color-var1);
			transition: 0.2s ease-in-out;
			
			@include tablet-max {
				max-width: 25px;
				max-height: 25px;
			}
		}
		
		a {
			display: inline-block;
			margin-right: 5px;
			background-color: var(--dash-statistics-chart-type-bg);
			color: var(--primary);
			padding: 3px 7px;
			border-radius: 4px;
			border: 0.5px solid var(--main-border-alt);
			
			&.active, &:hover {
				background-color: var(--dash-statistics-chart-type-selected-bg);
				svg {
					fill: var(--dash-statistics-chart-type-selected-text);
				}
			}
		}
		
	}
	
	.chart-legend {
		margin: auto;
		display: flex;
		
		.legend-switch {
			padding: 9px 30px;
			border: 0.5px solid var(--main-border-alt);
			border-radius: 4px;
			background-color: var(--dash-statistics-legend-switch-bg);
			position: relative;
			margin-left: 5px;
			display: flex;
			
			&:before {
				@include dash-widget-header-before;
				font-size: 50px !important;
				left: 14px !important;
				transform-origin: 14px 2px !important;
				cursor: ew-resize;
			}
			
			.form-switch {
				z-index: 1;
			}
			
			&.legend-placeholder {
				background-color: color.adjust($light, $alpha: -0.85);
				border-style: dashed;
				
				&:before {
					display: none;
				}
			}
			
			label {
				font-size: 15px;
				font-weight: 600;
				margin-left: 5px;
			}
			
			#value-chart {
				~ label {
					color: var(--dash-stats-data-widget-success);
				}
			}
			
			#products-chart {
				~ label {
					color: var(--primary);
				}
			}
			
			@include tablet-max {
				padding: 6.5px 22px;
				
				label {
					font-size: 13px;
					line-height: 1.6;
				}
			}
		}
		
	}
	
	.canvas-wrapper {
		width: 100%;
		flex-grow: 1;
	}
	
	.statistics-canvas {
		user-select: none;
	}
	
	.stats-chart-tooltip {
		opacity: 0;
		position: absolute;
		background: var(--black-hover);
		color: var(--white);
		font-size: 12px;
		border-radius: 3px;
		transition: all .1s ease;
		transform: translate(-50%, 0);
		padding: 4px;
		pointer-events: none;
	}
	
}

@include loader-rotate-animation;