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

.swstats-dash .summary-panel,
#swstats-widget .panel {
	.inner {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		& > div {
			position: relative;
			grid-column-end: span 3;
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: -10px;
				width: 1px;
				height: 100%;
				background-color: colours.$white;
				opacity: .2;
			}
			&:nth-child(2n+1)::before {
				display: none;
			}
			&.granularity,
			&.chart {
				grid-column: 1/-1;
				&::before {
					display: none;
				}
			}
		}
		h3 {
			font-size: 1em;
			color: rgba(colours.$white, .67);
			white-space: nowrap;
			margin: 0 0 .33em 0;
		}
		p {
			font-size: 18px;
			line-height: 1;
			margin: 0;
			white-space: nowrap;
			.comparison {
				display: inline-block;
				font-size: 11px;
				margin-left: .5em;
				&.green {
					color: colours.$green;
				}
				&.red {
					color: colours.$red;
				}
			}
		}
		& > div.visits,
		& > div.views {
			h3::after {
				content: '';
				display: inline-block;
				vertical-align: baseline;
				border-radius: 50%;
				margin-left: 8px;
				width: 10px;
				height: 10px;
			}
		}
		& > div.visits {
			h3::after {
				background-color: rgba(colours.$blue, .8);
			}
		}
		& > div.views {
			h3::after {
				background-color: rgba(colours.$green, .8);
			}
		}
	}
	.chart {
		position: relative;
	}
	.granularity {
		position: absolute;
		display: none;
		gap: 5px;
		bottom: -10px;
		right: 0;
		.panelbutton {
			background-color: colours.$panel-bottom;
			box-shadow: 0 0 12px colours.$panel-bottom;
		}
	}
}