/* TODO - remove ".layout--admin" from selectors
once stylesheet is only loaded in the admin */

/* Wrappers */
.layout--admin .wrapper {}
@media screen and (min-width: 30rem) {
	.layout--admin .wrapper {
		max-width: none;
	}
}

/* Layout container */
.layout--admin {}
@media screen and (min-width: 30rem) {
	.layout--admin {
		display: grid;
		grid-template-columns: 6rem 1fr;
		grid-template-areas:
			"header main"
			"header footer";
	}
}

/* Header */
.layout--admin .layout__header {
	padding: var(--size-small) 0;
}
		.layout--admin .layout__header a.logo {
			margin-bottom: 1rem;
			font-size: 1rem;
		}
@media screen and (min-width: 30rem) {
	.layout--admin .layout__header {
		grid-area: header;
		margin-bottom: 0;
		padding: var(--size-medium) 0;
	}
		.layout--admin .layout__header > .wrapper {
			flex-direction: column;
			align-items: center;
			padding: 0;
		}
			.layout--admin .layout__header a.logo {
				min-height: 3rem;
			}
}

/* Primary Navigation */
.layout--admin .layout__nav {
	font-size: 0.8rem;
}
@media screen and (min-width: 30rem) {
	.layout--admin .layout__nav {
		width: 100%;
	}
		.layout--admin .layout__nav ul {
			flex-direction: column;
			flex-wrap: nowrap;
			gap: 0;
			margin: 0;
			padding: 0;
		}
			.layout--admin .layout__nav li {
				text-transform: none;
			}
				.layout--admin .layout__nav a {
					display: flex;
					align-items: center;
					justify-content: center;
					min-height: 4rem;
					text-align: center;
					background-color: hsl(0 0% 100% / 0.25);
				}
				.layout--admin .layout__nav li + li a {
					background-color: hsl(0 0% 100% / 0.2);
				}
				.layout--admin .layout__nav li + li + li a {
					background-color: hsl(0 0% 100% / 0.15);
				}
				.layout--admin .layout__nav .current a,
				.layout--admin .layout__nav a:hover,
				.layout--admin .layout__nav a:focus {
					/*color: var(--shade-lighter);*/
					/*background-color: var(--shade-dark);*/
				}
}

/* Main */
.layout--admin .layout__main {}
@media screen and (min-width: 30rem) {
	.layout--admin .layout__main {
		grid-area: main;
		padding-top: var(--size-medium);
	}
}

/* Footer */
.layout--admin .layout__footer {}
@media screen and (min-width: 30rem) {
	.layout--admin .layout__footer {
		grid-area: footer;
		padding: calc(var(--size-large) * 2) 0;
	}
}