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

.statistics-widget {
	height: 322px;
	display: flex;
	flex-wrap: wrap;
	
	.mobile-filter-nav {
		display: none;
		margin-left: -$grid-gutter-width/2;
		margin-right: -$grid-gutter-width/2;
		margin-top: -$grid-gutter-width;
		
		@include mobile-max {
			display: block;
		}
		
		ul {
			background-color: $gray-200;
			display: flex;
			
			li {
				display: inline-block;
				padding: $grid-gutter-width/2 10px;
				color: $widget-text;
				font-size: 15px;
				font-weight: 100;
				transition: .2s ease-in-out;
				
				&:hover, &.active {
					color: $widget-success;
				}
				
				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: $grid-gutter-width/2;
		
		@include tablet-max {
			margin-bottom: $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: 32px;
			max-height: 32px;
			fill: $widget-text;
			transition: 0.2s ease-in-out;
			
			@include tablet-max {
				max-width: 25px;
				max-height: 25px;
			}
		}
		
		a {
			display: inline-block;
			margin-right: 5px;
			background-color: transparentize($light, 0.8);
			padding: 3px 7px;
			border-radius: 4px;
			border: 0.5px solid $gray-200;
			
			&.active, &:hover {
				svg {
					fill: $warning;
				}
			}
		}
		
	}
	
	.chart-legend {
		margin: auto;
		display: flex;
		
		.legend-switch {
			padding: 10px 40px;
			border: 0.5px solid $gray-200;
			border-radius: 4px;
			background-color: transparentize($light, 0.8);
			position: relative;
			margin-left: 5px;
			display: flex;
			
			&:before {
				@extend .widget-header:before;
				font-size: 50px !important;
				left: 14px !important;
				cursor: ew-resize;
			}
			
			&.legend-placeholder {
				background-color: transparentize($light, 0.85);
				border-style: dashed;
				
				&:before {
					display: none;
				}
			}
			
			label {
				font-size: 15px;
				font-weight: 600;
				margin-left: 5px;
			}
			
			#value-chart {
				~ label {
					color: $widget-success;
				}
			}
			
			#products-chart {
				~ label {
					color: $widget-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: rgba($black, .7);
		color: $white;
		font-size: 12px;
		border-radius: 3px;
		transition: all .1s ease;
		transform: translate(-50%, 0);
		padding: 4px;
		pointer-events: none;
	}
	
}