@use "./open-props.min.css";
@use "./normalize.min.css";
@use "./buttons.min.css";

// @custom-media --md-n-above (width >=768px);
// @custom-media --sm-n-above (width >=480px);
$md-n-above: 768px;
$sm-n-above: 480px;

:root {
	--font-size-fluid-1-07: calc(var(--font-size-fluid-1) * 0.7);
	--size-fluid-1-05: calc(var(--size-fluid-1) / 2);
}

body {
	font-family: var(--font-sans);
	margin: 0;
}

h1 {
	font-size: var(--font-size-4);
	margin-block-end: 1rem;
}

h2 {
	font-size: var(--font-size-3);
	margin-block-end: 1rem;
}

hr {
	margin-block: var(--size-fluid-2);
}

button {
	border-width: 1px;
	font-weight: normal;
}

:where(:not(:active):focus-visible) {
	outline-offset: 2px;
	outline-style: solid;
}

.admin {
	display: grid;
	grid-template-rows: 36px 1fr;
	grid-template-areas: "header" "main";

	@media (min-width: #{$md-n-above}) {
		grid-template-rows: 48px 1fr;
		grid-template-areas: "header header" "nav main";
		grid-template-columns: calc(var(--size-fluid-4) * 4) 1fr;
	}

	>header {
		position: sticky;
		top: 0;
		z-index: 10;
		grid-area: header;
		background: var(--surface-1);
		box-shadow: var(--shadow-3);
		display: grid;
		grid-template-columns: 1fr auto auto;
		gap: var(--size-fluid-2);
		padding: 0 var(--size-fluid-2);
		align-items: center;

		& button {
			padding: 1px 4px;
		}
	}
}



.logo {
	color: var(--text-2);
	font-size: var(--font-size-fluid-1);
	visibility: hidden;

	@media (min-width: #{$md-n-above}) {
		visibility: visible;
	}
}

.menu {
	grid-area: nav;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 15;

	@media (min-width: #{$md-n-above}) {
		position: relative;
		z-index: 1;
	}

	&:focus-within {
		& nav {
			display: block;
		}
	}

	& .toggle {
		color: var(--text-2);
		font-weight: normal;
		font-size: var(--font-size-fluid-1);
		text-decoration: none;
		white-space: nowrap;
		height: 36px;
		padding: 0 var(--size-fluid-2);
		margin: 0;
		display: flex;
		align-items: center;

		/* text-decoration: none; */
		@media (min-width: #{$md-n-above}) {
			display: none;
		}

		&:hover,
		&:focus-visible {
			background: var(--surface-3);
		}
	}
}

nav {
	background: var(--surface-2);
	position: absolute;
	top: 40px;
	left: 0;
	display: none;

	@media (min-width: #{$md-n-above}) {
		display: block;
		position: relative;
		top: 0;
	}

	>a {
		display: flex;
		align-items: center;
		height: var(--size-fluid-4);
		margin: 0;
		padding: 0 var(--size-fluid-2);
		text-decoration: none;
		border-bottom: var(--border-size-1) solid var(--surface-3);
		color: var(--text-1);

		&:visited {
			color: var(--text-1);
		}

		&:is(:hover, :focus) {
			background: var(--surface-4);
		}

		&[aria-current] {
			background: var(--surface-3);
		}
	}
}

main {
	flex: 1;
	grid-area: main;
	padding: var(--size-fluid-1);
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;

	& form {
		container-type: inline-size;
	}
}

.RoutingProgress {
	position: fixed;
	opacity: 0.5;
	top: 0;
	width: 100vw;
	transform: translateY(-50%);
	z-index: 20;
}

.Card {
	background: var(--surface-2);
	border-radius: var(--radius-2);
	padding: var(--size-fluid-2);
	box-shadow: var(--shadow-3);
	margin-block-end: var(--size-fluid-2);
}

.Listing {
	padding: 0;

	>li {
		display: block;
		width: 100%;
		list-style: none;
		padding: 0;
		max-inline-size: inherit;
		display: flex;
		align-items: stretch;

		>a {
			width: 100%;
			padding: 0 var(--size-fluid-1);
			margin: 0;
			text-decoration: none;
			display: grid;
			align-items: center;
			font-size: var(--font-size-fluid-1-07);

			&:visited {
				color: var(--text-1);
			}

			&:hover,
			&:focus-visible {
				background: var(--surface-3);
			}
		}
	}
}

form footer {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--size-fluid-2);
	align-items: center;
	justify-content: start;

	@container (min-width: #{$sm-n-above}) {
		grid-template-columns: auto auto;
	}
}

fieldset {
	margin-block-end: var(--size-fluid-3);

	&:disabled {
		opacity: 0.8;
	}
}

label {
	display: block;
	margin-block-end: var(--size-fluid-1);

	>div {
		margin-block-end: 0.3rem;
	}

	>textarea {
		display: block;
		width: 100%;
	}

	>input:not([type='checkbox']) {
		display: block;
		width: 100%;
	}

	>input[type='checkbox']+span {
		margin-inline-start: 0.5rem;
	}
}

input:disabled {
	background: var(--surface-3);
	color: var(--text-2);
	cursor: not-allowed;
}

.Alert {
	font-size: initial;
	font-weight: var(--font-weight-7);
	border-radius: var(--radius-2);
	padding-block: .75ch;
	padding-inline: var(--size-relative-6);

	&.Danger {
		color: var(--red-1);
		background: var(--red-6);
		border: var(--border-size-1) solid var(--red-7);
	}

	&.Success {
		color: var(--green-1);
		background: var(--green-6);
		border: var(--border-size-1) solid var(--green-7);
	}
}

@media (min-width: #{$md-n-above}) {
	.Grid-fluid-2 {
		display: grid;
		gap: var(--size-fluid-2);
		grid-template-columns: 1fr 1fr;
	}
}

.images {
	margin-block: var(--size-fluid-1);
	display: grid;
	grid-template-columns: repeat(auto-fill, 240px);
	gap: var(--size-fluid-2) var(--size-fluid-1);
	justify-content: space-around;

	@media (min-width: #{$md-n-above}) {
		justify-content: start;
	}

	>figure {
		box-shadow: var(--shadow-3);
		background: var(--surface-2);
		border-radius: var(--radius-2);
		gap: 0;
		justify-items: stretch;
		align-content: space-between;

		transition-property: transform, box-shadow;
		transition-duration: 0.3s;
		transition-timing-function: ease;

		&:hover {
			box-shadow: var(--shadow-6);
			transform: scale(1.03);
		}

		>img {
			cursor: pointer;
		}

		>figcaption {
			padding: var(--size-fluid-1-05);
		}

		>footer {
			display: flex;
			justify-content: space-between;
		}
	}
}

.login-card {
	width: min(100% - 1rem, 20rem);
	margin-inline: auto;
	margin-block-start: 1rem;
}

.ImageUploadPreview {
	background: var(--surface-2);
	display: flex;
	align-items: center;
	justify-content: center;

	>img {
		max-height: 200px;
	}

	>p {
		font-size: var(--font-size-3);
		color: var(--text-2);
	}
}

dialog {
	max-inline-size: var(--size-content-4);

	&:not([open]) {
		display: none;
	}

	>img {
		max-height: calc(100vh - 70px);
		width: auto;
	}
}

/* POSTS LISTING PAGE */
.PostListItem {
	height: 48px;

	>a {
		grid-template-columns: 125px 50px auto;

		@media (min-width: #{$sm-n-above}) {
			grid-template-columns: 170px 50px auto 170px;
		}
	}
}

.PostListItem-created {
	display: none;

	@media (min-width: #{$sm-n-above}) {
		display: block;
	}
}

.PostListItem-status {
	&.published {
		color: var(--green-6);
	}

	&.not-published {
		color: var(--blue-6);
	}
}

/* POST PAGE */
.PostPage {
	>header {
		margin-block-end: var(--size-fluid-1-05);

		@media (min-width: #{$sm-n-above}) {
			display: grid;
			grid-template-columns: 1fr auto;
		}

		& h1 {
			margin-block-end: 0;
		}

		& dl {
			font-size: var(--font-size-fluid-1-07);
			margin-block-start: var(--size-fluid-1-05);

			@media (min-width: #{$sm-n-above}) {
				margin-block-start: 0;
			}

			& dt,
			& dd {
				display: inline;
			}
		}
	}

}

/* STATS */
.Stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, 350px);
	gap: var(--size-fluid-2) var(--size-fluid-1);
	align-items: start;
}

.StatsTable {
	text-align: left;
	background: var(--surface-2);
	border-radius: var(--radius-2);
	box-shadow: var(--shadow-3);
	padding: var(--size-fluid-1);
	margin-block-end: var(--size-fluid-2);
}

.StatsTable-path {
	width: 250px;
}

.StatsTable-count {
	width: 70px;
}