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

.swstats-admin-notice-container {
	h2 {
		display: none;
	}
	.notice:first-of-type {
		margin-top: 30px;
	}
}

.swstats {
	
	color: colours.$dark-grey;
	
	&.wrap {
		margin-top: 30px;
	}
	
	
	
	h3 {
		font-weight: 400;
		margin: 0;
		font-size: 16px;
	}
	
	.panel {
		padding: 20px;
		border-radius: 5px;
		box-shadow: 0 5px 20px colours.$shadow;
		background-color: colours.$white;
	}
	
	.button-group {
		list-style: none;
		display: flex;
		margin: 0;
		gap: 12px;
		align-items: center;
		li {
			margin: 0;
			padding: 0;
		}
	}
	
	.buttons {
		display: flex;
		margin: 0;
		gap: 12px;
		align-items: center;
	}
	
	button,
	.button {
		display: flex;
		align-items: center;
		color: colours.$white;
		text-decoration: none;
		box-shadow: none;
		gap: 8px;
		margin: 0;
		padding: 6px 12px;
		min-height: 36px;
		font-size: 14px;
		line-height: 1;
		border-radius: 4px;
		border: none;
		background-color: colours.$primary-button;
		transition: background-color 100ms ease;
		svg {
			fill: colours.$white;
			width: 20px;
			height: 20px;
		}
		&:hover,
		&:focus,
		&:active {
			background-color: colours.$primary-button-hover;
			border: none;
			box-shadow: none;
			color: colours.$white;
		}
		&.secondary {
			color: colours.$dark-grey;
			background-color: colours.$secondary-button;
			svg {
				fill: rgba(colours.$dark-grey, .8);
			}
			&:hover,
			&:focus,
			&:active {
				background-color: colours.$secondary-button-hover;
				color: colours.$dark-grey;
			}
		}
		&.dark {
			background-color: rgba(colours.$white, .1);
			svg {
				fill: colours.$white;
			}
			&:hover,
			&:focus,
			&:active {
				background-color: rgba(colours.$white, .2);
			}
		}
		
		
	}
	
	select {
		font-size: 14px;
		padding: 0 28px 0 12px;
		min-height: 36px;
		border-radius: 4px;
		border-color: colours.$mid-grey-2;
		background-color: colours.$light-grey;
		color: inherit;
		&:hover,
		&:focus {
			color: inherit;
			border-color: colours.$primary-button;
			box-shadow: 0 0 0 1px colours.$primary-button;
		}
	}
	
	.switch {
		position: relative;
		width: 56px;
		height: 30px;
		cursor: pointer;
		input {
			opacity: 0;
			width: 0;
			height: 0;
			margin: 0;
			border: none;
			box-shadow: none;
			outline: none;
			&::before {
				display: none;
			}
		}
		span {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: colours.$light-grey;
			border: solid 1px colours.$mid-grey-2;
			border-radius: 30px;
			&:before {
				content: '';
				position: absolute;
				top: 3px;
				left: 3px;
				width: 22px;
				height: 22px;
				border-radius: 50%;
				background-color: colours.$mid-grey-2;
			}
		}
		&:hover,
		&:focus {
			span {
				border-color: colours.$primary-button;
				box-shadow: 0 0 0 1px colours.$primary-button;
			}
		}
		input:checked + span {
			background-color: colours.$primary-button;
			border-color: colours.$primary-button;
			&:before {
				left: calc(100% - 22px - 3px);
				background-color: colours.$light-grey;
			}
		}
	}
	
}