@charset 'utf-8';
@use 'colours';

.swstats-dash .data-panels > div,
#swstats-widget .inside {
	
	background: linear-gradient(colours.$panel-top, colours.$panel-bottom);
	color: colours.$white;
	padding: 10px;
	
	.loading,
	.nodata {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.loading {
		z-index: 1;
		i {
			display: inline-block;
			width: 8px;
			height: 8px;
			margin: 0 3px;
			border-radius: 50%;
			background-color: colours.$white;
			animation: swstats-pulse 600ms ease-out alternate infinite;
			&:nth-child(1) {
				animation-delay: -300ms;
			}
			&:nth-child(2) {
				animation-delay: -150ms;
			}
		}
	}
	
	.nodata {
		z-index: 0;
		margin: 0;
	}
	
	.inner,
	.loading,
	.nodata {
		transition: opacity 300ms ease-out;
		opacity: 0;
		&.show {
			opacity: 1;
		}
	}
	
}

.swstats-dash {
	
	position: relative;
	
	a {
		box-shadow: none;
	}
	
	.panelbutton {
		color: colours.$blue;
		text-decoration: none;
		box-shadow: none;
		padding: 6px 12px;
		font-size: 14px;
		line-height: 1;
		border-radius: 4px;
		border: solid 1px colours.$blue;
		background: transparent;
		transition: all 100ms ease;
		&:hover,
		&:focus,
		&:active,
		&.active {
			border: solid 1px colours.$white;
			box-shadow: none;
			color: colours.$white;
		}
	}
	
	.data-panels {
		
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-gap: 15px;
		
		& > div {
			position: relative;
			grid-column-end: span 6;
		}
		
	}
	
	.summary-panel {
		padding: 20px;
		min-height: 402px;
		.inner {
			position: relative;
			z-index: 2;
			grid-gap: 20px;
			margin: 10px;
		}
		.chart {
			height: 200px;
		}
	}
	
	.data-panel {
		
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px;
		}
		
		h2 {
			margin: 5px 0;
			color: #fff;
		}
		
		.switches {
			display: flex;
			gap: 5px;
			a {
				&:nth-child(1) {
					display: none;
				}
			}
		}
		
		.container {
			position: relative;
			margin: 5px 0;
			min-height: 363px;
		}
		
	}
	
	.table {
		margin: 0;	
		.row {
			display: grid;
			grid-template-columns: 1fr 4em;
			&.cols3 {
				grid-template-columns: 1fr 4em 4em;
			}
			grid-gap: 20px;
			padding: 0 10px;
			background-repeat: no-repeat;
			background-position: 0 0;
			animation: swstats-bar 600ms 400ms ease-out both;
			&.head {
				font-weight: bold;
				opacity: .67;
			}
			&.body {
				margin-top: 3px;
			}
			div {
				padding: 6px 0;
				text-align: right;
				&:first-child {
					text-align: left;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
		.fflag {
			vertical-align: -1px;
			margin-right: 6px;
		}
	}
	

	@media (min-width: 400px) {
		.summary-panel {
			min-height: 420px;
			.inner p {
				font-size: 24px;
			}
		}
	}
	
	@media (min-width: 600px) {
		.summary-panel {
			min-height: 414px;
			.inner div {
				grid-column-end: span 2;
				&:nth-child(2n+1)::before {
					display: block;
				}
				&:nth-child(3n+1)::before {
					display: none;
				}
			}
			.chart {
				height: 250px;
			}
			.granularity {
				display: flex;
			}	
		}
	}
	
	@media (min-width: 880px) {
		.data-panels {
			div.half {
				grid-column-end: span 3;
			}
			div.third {
				grid-column-end: span 2;
			}
		}
	}
	
	@media (min-width: 1220px) {
		.summary-panel {
			min-height: 376px;
			.inner div {
				grid-column-end: span 1;
				&:nth-child(3n+1)::before {
					display: block;
				}
				&:nth-child(6n+1)::before {
					display: none;
				}
			}
			.chart {
				height: 280px;
			}	
		}
	}
	
}