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

.swstats-head {
	
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	z-index: 800;
	margin: 0 0 0 -20px;
	padding: 12px 10px 12px 20px;
	background-color: colours.$panel-bottom;
	color: colours.$white;

	.logo {
		display: flex;
		align-items: center;
		gap: 12px;
		color: inherit;
		text-decoration: none;
		box-shadow: none;
		svg {
			width: 36px;
			height: 36px;
			fill: colours.$white;
		}
		h1 {
			display: none;
			font-size: 20px;
			font-weight: 400;
			margin: 0;
			color: inherit;
		}
	}
	
	@media (min-width: 500px) {
		.logo h1 {
			display: block;
		}
	}
	
	@media (min-width: 783px) {
		padding: 12px 20px;
	}
	
}