@use "sass:map";
@use "../partials/breakpoints";

[data-layout="website"] {
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"header"
		"main"
		"footer";
	>  {
		header {
			grid-area: header;
			@media (max-width: map.get(
					breakpoints.$breakpoints,
					"small"
				)) {
				padding-block-start: 1rem;
			}
		}
		main {
			display: grid;
			grid-area: main;
			gap: 1rem;
		}
		footer {
			grid-area: footer;
		}
		header,
		main,
		footer {
			margin: 0 auto;
			@include breakpoints.container;
			@media (max-width: map.get(
					breakpoints.$breakpoints,
					"small"
				)) {
				padding-inline: 1rem;
			}
		}
		header {
			grid-area: header;
			> nav {
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				@media (max-width: map.get(breakpoints.$breakpoints, "small")) {
					flex-direction: column;
				}
				> menu {
					display: inline-flex;
					align-items: baseline;
					gap: 1rem;
					padding: 0;
					list-style-type: none;
					@media (max-width: map.get(
							breakpoints.$breakpoints,
							"small"
						)) {
						flex-direction: column;
					}

					a {
						&:not(:hover) {
							text-decoration: none;
						}

						&[aria-current="page"] {
							text-decoration: underline;
						}
					}
				}
			}
		}
	}
}