:root {
	color-scheme: dark;

	--color-main: #3f51b5;
	--color-text: #ffffff;
	--color-page-bg: #404060;
	--color-navbar-bg: #202040;

	--navbar-icon-height: 2.5rem; /* minimum 2rem */
	--navbar-padding-top-bottom: 2px;
	--navbar-height: calc((var(--navbar-icon-height) * 1.2) + (2 * var(--navbar-padding-top-bottom)));
}


html {
	width: 100%;
	height: 100%;
	background: var(--color-page-bg);
	color: var(--color-text);
	font-family: 'Open Sans', sans-serif;
	font-size: 90%;
	min-width: 320px;
	max-width: 1920px;
	margin: 0 auto;
	scroll-behavior: smooth;
	overscroll-behavior: contain;
}



body {
	/*overflow-x: clip;*/
	/*overflow-y: scroll;*/
	scroll-behavior: smooth;
	overscroll-behavior: contain;
	scroll-padding-top: var(--navbar-height);
	padding-top: var(--navbar-height);

	a {
		color: var(--color-text);
		text-decoration-line: underline;
		text-decoration-thickness: 0.1em;
		background: none;
		cursor: pointer;

		&:hover {
			color: var(--color-text);
			text-decoration-line: underline;
			text-decoration-thickness: 0.15em;
			background: none;
		}


		&.button {
			padding: 5px 10px;
			border: 2px solid var(--color-text);
			background-color: var(--color-text);
			color: var(--color-page-bg);
			text-decoration: none;
			font-weight: 600;
			cursor: pointer;

			&:hover {
				color: var(--color-text);
				background: var(--color-page-bg);
			}
		}
	}

	h1, h2, h3, h4, h5, h6 {
		margin-top: 1rem;
		margin-bottom: 0.5rem;
		font-weight: 600;
	}
	h1 {
		font-size: 1.5rem;
	}
	h2 {
		font-size: 1.3rem;
	}
	h3 {
		font-size: 1.1rem;
	}
	h4, h5, h6 {
		font-size: 1rem;
	}

	p {
		margin: 0.5rem 0;
	}
}








.navbar {
	user-select: none;
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	gap: 10px;
	align-items: center;
	padding: var(--navbar-padding-top-bottom) 10px var(--navbar-padding-top-bottom) 5px;
	line-height: 1.2;
	font-size: 1rem;
	background: var(--color-navbar-bg);
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);

	.icon {
		display: flex;
		flex-shrink: 0;
		flex-grow: 0;
		align-items: center;
		pointer-events: none;

		&.enable-back {
			cursor: pointer;
			pointer-events: auto;

			.back-icon {
				visibility: visible;
			}
		}

		.back-icon {
			visibility: hidden;
			height: var(--navbar-icon-height);
			width: auto;
			overflow: hidden;

			svg {
				height: calc(100% - 0.6rem);
				fill: var(--color-text);
				margin: 0.3rem 0;
			}
		}

		.app-icon {
			display: block;
			height: calc(var(--navbar-icon-height) * 1.2);
		}
	}

	.title {
		flex-grow: 1;
		flex-shrink: 1;
		overflow: hidden;


		.app-title {
			text-overflow: ellipsis;
			white-space: nowrap;
			font-weight: 600;
		}

		.path {
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 0.85rem;
			opacity: 0.85;
		}
	}

	.menu {
		--burger-size: calc(var(--navbar-icon-height) * 0.66);
		--burger-line-fraction: calc(1 / 8);
		--burger-animation-duration: 0.3s;

		nav {
			background: rgba(0, 0, 0, 0.25);
			backdrop-filter: blur(2px);
			width: 100vw;
			height: 100dvh;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			z-index: 200;
			transform: translateX(100vw);

			.nav-content {
				--padding: 20px;
				position: relative;
				right: 0;
				top: 0;
				margin: 0 0 auto auto;
				padding: calc(var(--navbar-height) + var(--padding)) var(--padding) var(--padding) var(--padding);
				background: rgba(0, 0, 0, 0.85);
				width: 30rem;
				max-width: calc(75% - 2 * var(--padding));
				height: calc(100dvh - var(--navbar-height));
				transition-timing-function: cubic-bezier(10, 2, 3, 1);
				transform: translateX(30rem);
				transition: 0.5s;
				text-align: right;

				.nav-item {
					display: block;
					padding: 10px 10px;
					margin: 10px 0;
					background: rgba(255, 255, 255, 0.2);
					cursor: pointer;
					text-decoration: none;

					&:hover {
						font-weight: bold;
					}
				}

				.state {
					padding: 0 10px;
					font-style: italic;

					span {
						font-weight: 600;
						font-style: normal;
					}
				}

				.logout {
					margin-top: 40px;
				}
			}
		}

		.burger {
			position: relative;
			cursor: pointer;
			width: var(--burger-size);
			height: var(--burger-size);
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			z-index: 201;

			& > div {
				height: calc(var(--burger-size) * var(--burger-line-fraction));
				background-color: var(--color-text);
				transition: translate var(--burger-animation-duration) ease var(--burger-animation-duration), scale var(--burger-animation-duration) step-start var(--burger-animation-duration), rotate var(--burger-animation-duration) ease;
			}
		}


		&.show {
			nav {
				transform: translateX(0rem);

				.nav-content {
					transform: translateX(0rem);
					transition: 0.5s;
				}
			}

			.burger {
				& > div {
					background-color: var(--color-text);
					transition: translate var(--burger-animation-duration) ease, scale var(--burger-animation-duration) step-end, rotate var(--burger-animation-duration) ease var(--burger-animation-duration);

					&:nth-child(1) {
						translate: 0 calc(var(--burger-size) / 2 - (var(--burger-size) * var(--burger-line-fraction) / 2));
						rotate: -45deg;
					}
					&:nth-child(2) {
						scale: 0 1;
						transform-origin: center;
					}
					&:nth-child(3) {
						translate: 0 calc(-1 * (var(--burger-size) / 2 - (var(--burger-size) * var(--burger-line-fraction) / 2)));
						rotate: 45deg;
					}
				}
			}

		}
	}

}








.login-form {
	margin: 5rem auto;
	max-width: 30ex;

	.title {
		font-size: 1.2rem;
		font-weight: 600;
	}

	.input-container {
		margin: 0.5rem 0;

		label {
			display: block;
		}

		input {
			display: block;
			width: 30ex;
			max-width: 100%;
		}
	}

	.status {
		position: relative;
		margin: 1rem 0;
		padding: 10px 0 10px 2rem;
		font-weight: 500;

		&::before {
			content: '!';
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			width: 1rem;
			font-weight: bold;
			font-size: 3rem;
			vertical-align: middle;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: start;
		}
	}
}







.browser {
	position: relative;

	.items {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		grid-gap: 10px;
		margin: 0;
		padding: 0;

		li {
			margin: 0;
			padding: 0;
			list-style-type: none;
			text-indent: 0;
		}
	}


	.thumbnail-item {
		position: relative;
		display: flex;
		aspect-ratio: 1 / 1;
		justify-content: stretch;
		align-items: stretch;

		&[data-type="folder"] {
			.title {
				font-weight: 600;
			}
		}

		.thumbnail {
			object-fit: cover;
			object-position: center;
			background: #888888;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		.title {
			position: absolute;
			margin: auto 0 0 0;
			background: rgba(0, 0, 0, 0.75);
			line-height: 1.2;
			height: calc(1em * 1.2 * 2);
			padding: 5px 5px 2px 5px;
			overflow: hidden;
			bottom: 0;
			left: 0;
			right: 0;
			text-align: center;
			vertical-align: middle;
			font-size: 0.9rem;
			pointer-events: none;
			hyphens: auto;

			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			overflow-wrap: anywhere;
			word-break: break-all;
		}
	}
}



.pswp {
	--pswp-placeholder-bg: #ff222200;

	/*.pswp__img {*/
	/*	object-fit: contain;*/
	/*	object-position: center;*/
	/*}*/


	.pswp__button {
		flex-shrink: 0;
	}

	.pswp__counter {
		white-space: nowrap;
		flex-shrink: 0;
	}

	.pswp__filename {
		white-space: nowrap;
		flex-shrink: 1;
		overflow: hidden;
		text-overflow: ellipsis;

	}

}







.footer {
	user-select: none;
	padding-top: 1.5rem;
	padding-bottom: 1rem;
	/*text-align: right;*/

	.app-title {
		font-weight: 600;

		.version {
			font-weight: 400;
		}
	}

	.author {
		font-style: italic;
		font-size: 0.9rem;
	}

}









.loader {
	position: fixed;
	display: flex;
	top: var(--navbar-height);
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0);
	transition: background 0s ease;
	opacity: 0;
	pointer-events: none;

	&.show {
		opacity: 1;
		pointer-events: auto;
		background: rgba(0, 0, 0, 0.75);
		transition: background 0.6s ease;
	}

	.loading-animation {
		margin: auto;
		width: 50px;
		aspect-ratio: 1;
		border-radius: 50%;
		border: 8px solid var(--color-text);
		animation: l20-1 0.8s infinite linear alternate,
		l20-2 1.6s infinite linear;
	}
}

@keyframes l20-1 {
	0% {
		clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%)
	}
	12.5% {
		clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%)
	}
	25% {
		clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%)
	}
	50% {
		clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%)
	}
	62.5% {
		clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%)
	}
	75% {
		clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%)
	}
	100% {
		clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%)
	}
}
@keyframes l20-2 {
	0% {
		transform: scaleY(1) rotate(0deg)
	}
	49.99% {
		transform: scaleY(1) rotate(135deg)
	}
	50% {
		transform: scaleY(-1) rotate(0deg)
	}
	100% {
		transform: scaleY(-1) rotate(-135deg)
	}
}





.info {
	max-width: 50ex;

	.title {
		margin: 0;
		font-weight: 700;
		font-size: 1.5rem;
	}

	.app-title {
		margin: 1rem 0 0 0;
		font-weight: 700;
		font-size: 1.25rem;
	}

	.app-version,
	.author {
		font-style: italic;
	}

	.close-button {
		margin: 3rem 0;
	}
}