:root {
	--card: 0 1px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	--main-clr: rgb(135, 18, 245);
	--border: 1.6px solid #ccc;
	--bg-bgc: hsl(0, 2%, 80%);
	--txt-clr: hsl(0, 0%, 5%);
	--icon-clr: hsl(0, 0%, 5%);
	--input-bgc: hsl(0, 0%, 100%);
	--explorer-bgc: hsl(0, 0%, 92%);
	--domain-bgc: hsl(0, 0%, 100%);
	--container-bgc: hsl(0, 0%, 95%);
	--popup-bgc: hsl(0, 0%, 100%);
	--script-card-bgc: hsl(0, 0%, 100%);
	--pre-bgc: hsl(0, 0%, 90%);
	--file-card-bgc: hsl(0, 0%, 100%);
	--fab-label-bgc: hsl(0, 0%, 100%);
	--fab-bgc: hsl(0, 0%, 100%);
	--chip-bgc: hsl(0, 0%, 80%);
	--scrollbar-bgc: whitesmoke;
	--toast-bgc: #6b6a69;
	--toast-txt: rgb(255, 145, 0);
}

@media (prefers-color-scheme: dark) {
	:root {
		--card: 0 1px 4px rgba(200, 200, 200, 0.2), 0 1px 2px rgba(200, 200, 200, 0.3);
		--border: 1.6px solid hsl(0, 0%, 48%);
		--bg-bgc: hsl(0, 0%, 6%);
		--txt-clr: #bdc1c6;
		--icon-clr: hsl(0, 0%, 95%);
		--input-bgc: hsl(0, 0%, 27%);
		--explorer-bgc: hsl(0, 0%, 8%);
		--domain-bgc: hsl(0, 0%, 18%);
		--container-bgc: hsl(0, 0%, 12%);
		--script-card-bgc: hsl(0, 0%, 18%);
		--pre-bgc: hsl(0, 0%, 8%);
		--popup-bgc: hsl(0, 0%, 22%);
		--file-card-bgc: hsl(0, 0%, 16%);
		--fab-label-bgc: hsl(0, 0%, 16%);
		--fab-bgc: hsl(0, 0%, 22%);
		--scrollbar-bgc: black;
		--chip-bgc: hsl(0, 0%, 33%);
		--toast-bgc: #5e5f5f;
		--toast-txt: rgb(245, 140, 3);
	}
}

* {
	box-sizing: border-box;
}

html {
	height: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: BlinkMacSystemFont, Segoe UI, Roboto, "Fira Sans", Ubuntu, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-size-adjust: 100%;
	font-size: 100%;
	height: 100%;
	margin: 0;
	text-rendering: optimizeSpeed;
	background-color: var(--bg-bgc);
	color: var(--txt-clr);
}

svg {
	height: 1.5em;
	vertical-align: middle;
	fill: var(--icon-clr);
	cursor: pointer;
}

[popover] {
	border: none;
	margin: 0;
	color: inherit;
	box-shadow: var(--card);
	background-color: var(--popup-bgc);
	inset: unset;
}

dialog {
	border: none;
	color: inherit;
	border-radius: 0.4em;
	box-shadow: var(--card);
	background-color: var(--popup-bgc);

	&::backdrop {
		background-color: rgb(0 0 0 / 0.4);
	}

	&:focus {
		outline: none;
	}
}

button {
	--btn-clr: dodgerblue;
	display: block;
	padding-block: 0.4em;
	margin-inline: 1em;
	box-shadow: var(--card);
	background-color: var(--btn-clr);
	border-radius: 0.4em;
	border: none;
	color: #fff;
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
}

main {
	display: flex;
	min-height: 100vh;

	& domain-explorer {
		flex-basis: 14%;
		flex-shrink: 0;
		background-color: var(--explorer-bgc);
		border-right: var(--border);
	}

	& scripts-container {
		flex-grow: 1;
		background-color: var(--container-bgc);
		position: relative;

		&.empty::before {
			content: "No Script found.\A click on (plus floating button) to add script";
			white-space: pre;
			color: red;
			font-size: 1.2rem;
			padding: 1em;
		}
	}
}

#alert-box {
	top: 2em;
	right: 0.5em;
	padding: 0;

	&:popover-open {
		@starting-style {
			translate: 110% 0;
		}

		translate: 0 0;
	}

	translate: 110% 0;
	transition: translate 600ms ease-out;
}

#script-editor-dialog,
#host-permission,
#report-bug {
	overflow: visible;
	&[open] {
		@starting-style {
			translate: 0 100vh;
		}

		translate: 0 0;
	}

	transition: translate 0.7s ease-out, overlay 0.7s ease-out allow-discrete, display 0.7s ease-out allow-discrete;
	translate: 0 100vh;
}
