@import "@styles/layout.less";
@import "@styles/animations.less";
@import "@styles/vars.less";
@import "@styles/fonts.less";
@import "@styles/fixments.less";
@import "@styles/mobile.less";

*,
*:before,
*:after {
	box-sizing: inherit;
	font-size: calc(1em * var(--fontScale));
}

h1 {
	font-size: calc(1.4em * var(--fontScale));
}

h2 {
	font-size: calc(1.2em * var(--fontScale));
}

h3 {
	font-size: calc(1em * var(--fontScale));
}

h4 {
	font-size: calc(1em * var(--fontScale));
}

h5 {
	font-size: calc(1em * var(--fontScale));
}

h6 {
	font-size: calc(1em * var(--fontScale));
}

p {
	font-size: calc(1em * var(--fontScale));
}

code {
	user-select: text !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a {
	display: inline-flex;
	flex-direction: row;
	align-items: center;

	gap: 5px;

	margin: 0;
}

#nprogress {
	position: absolute;
	top: 0;
	width: 100vw;

	.bar {
		height: 2px;
		background: var(--app-color);
	}
}

#root {
	width: 100%;
	height: 100%;

	padding: 0;
	margin: 0;

	transition: all 150ms ease-in-out;

	overflow-x: hidden;

	&.electron {
		.ant-layout-sider {
			padding-top: 0px;
		}
	}
}

body {
	width: 100%;
	height: 100%;

	padding: 0;
	margin: 0;
}

html {
	box-sizing: border-box;

	width: 100%;
	height: 100%;

	padding: 0;
	margin: 0;

	background-color: var(--background-color-primary) !important;

	user-select: none;
	--webkit-user-select: none;

	scroll-behavior: smooth;
	text-rendering: optimizeLegibility !important;

	font-family: var(--fontFamily);

	-webkit-overflow-scrolling: touch;
	-webkit-app-region: no-drag;

	::-webkit-scrollbar {
		display: none;

		width: 10px;
		height: 100dvh;
		z-index: 190;

		background-color: var(--background-color-accent);
	}

	::-webkit-scrollbar-thumb {
		position: absolute;
		z-index: 200;

		height: 6px;
		margin: 5px 10px 5px 5px;
		transition: all 200ms ease-in-out;

		border: 4px solid var(--colorPrimary);

		background-color: var(--colorPrimary);
		background-clip: padding-box;

		-webkit-border-radius: 7px;
	}

	::-webkit-scrollbar-button {
		width: 0;
		height: 0;
		display: none;
	}

	::-webkit-scrollbar-corner {
		background-color: transparent;
	}

	-webkit-overflow-scrolling: touch;

	// &.root-scale-effect {
	// 	background-color: black !important;

	// 	#root {
	// 		animation: rootScaleOut 250ms ease-in-out forwards;
	// 		animation-delay: 0;
	// 	}
	// }

	&.compact-mode {
		.content_layout {
			padding: 0 !important;
			margin: 0 !important;
		}
	}

	&.centered-content {
		.content_layout {
			margin: 0 auto;

			min-width: 400px;
			max-width: 40%;

			padding: 0;

			padding-top: 20px;
			padding-bottom: 20px;
		}
	}

	&.disable-top-layout-padding {
		.content_layout {
			padding-top: 0;
		}
	}

	&.total-window-height {
		.content_layout {
			height: 100vh;
			height: 100dvh;
		}
	}
}

a {
	color: var(--colorPrimary);
	text-decoration: none;

	&:hover {
		color: var(--colorPrimary);
	}
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
	color: var(--text-color);
	text-rendering: optimizeLegibility !important;

	margin-top: 0;
}

svg {
	color: currentColor;
	vertical-align: -0.125em;
}

*:not(input):not(textarea):not(a) {
	user-select: none;
	-webkit-user-select: none;
	/* disable selection/Copy of UIWebView */
	-webkit-touch-callout: none;
	/* disable the IOS popup when long-press on a link */
}

// LAYOUT
.app_layout {
	position: relative;

	width: 100vw;

	display: flex;
	flex-direction: row;

	align-items: flex-start;
	justify-content: flex-start;

	background-color: rgba(
		var(--layoutBackgroundColor),
		var(--backgroundColorTransparency)
	) !important;
	backdrop-filter: blur(var(--backgroundBlur));
}

.content_layout {
	position: relative;

	display: flex;
	flex-direction: column;

	align-items: flex-start;
	justify-content: flex-start;

	-webkit-overflow-scrolling: touch;

	width: 100%;

	transition: all 150ms ease-in-out;

	margin: var(--layoutMargin);
	padding: var(--layoutPadding);
}

.root_background {
	mask-image: var(--backgroundSVG);
	-webkit-mask-image: var(--backgroundSVG);

	background-image: var(--backgroundImage);
	background-size: var(--backgroundSize);
	background-position: var(--backgroundPosition);
	background-repeat: var(--backgroundRepeat);
	background-attachment: var(--backgroundAttachment);

	position: fixed;
	top: 0;
	left: 0;

	width: 100vw;
	height: 100dvh;

	transition:
		background-image,
		background-size,
		background-position,
		background-repeat,
		background-attachment all 150ms ease-in-out;

	pointer-events: none;

	&.active {
		background-color: var(--text-color);
	}

	svg {
		width: 100%;
		height: 100%;
	}
}

.app_render_error {
	position: relative;

	display: flex;
	flex-direction: column;

	justify-content: center;
	align-items: center;

	width: 100vw;
	height: 100dvh;

	.ant-result {
		background-color: var(--background-color-primary);
		border-radius: 8px;
	}
}

#fullImageViewer {
	.__react_modal_image__modal_container {
		background-color: rgba(0, 0, 0, 0.3) !important;
		backdrop-filter: blur(10px);
	}

	.__react_modal_image__header {
		background-color: transparent !important;
	}
}

.inline_field {
	display: inline-flex;

	flex-direction: row;
	align-items: center;

	justify-content: space-between;

	padding: 10px;

	color: var(--text-color);

	background-color: var(--background-color-primary);

	border-radius: 12px;

	.field_header {
		display: inline-flex;

		flex-direction: row;
		align-items: center;

		gap: 8px;

		font-size: 0.8rem;

		.field_icon {
			display: inline-flex;

			flex-direction: row;
			align-items: center;
			justify-content: center;

			background-color: var(--background-color-primary);

			border-radius: 100%;

			padding: 5px;

			font-size: 1rem;

			svg {
				margin: 0;
			}
		}
	}
}

.card {
	display: flex;
	flex-direction: column;

	background-color: var(--background-color-accent);

	padding: 10px;

	border-radius: 12px;

	gap: 10px;
}

.key-value-field {
	display: flex;
	flex-direction: column;

	gap: 5px;

	.key-value-field-key {
		display: flex;
		flex-direction: row;

		align-items: center;

		gap: 10px;

		font-weight: bold;
		font-size: 0.9rem;
	}

	.key-value-field-description {
		display: flex;
		flex-direction: column;

		gap: 5px;
		opacity: 0.8;
	}

	.key-value-field-value {
		display: flex;
		flex-direction: row;

		align-items: center;

		gap: 10px;
		padding: 7px 5px;

		border-radius: 8px;
		background-color: var(--background-color-accent);

		font-family: "DM Mono", monospace;

		font-size: 0.7rem;

		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		p,
		span,
		a {
			user-select: all !important;
		}
	}
}