@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
	}

	body,
	h1,
	h2,
	h3,
	h4,
	p,
	figure,
	blockquote,
	dl,
	dd {
		margin-block-end: 0;
	}

	dd {
		margin-inline: 0;
	}

	body {
		margin: 0;
		padding: 0;
	}

	ul[role="list"],
	ol[role="list"] {
		list-style: none;
	}

	body {
		line-height: 1.5;
	}

	h1,
	h2,
	h3,
	h4,
	button,
	input,
	label {
		line-height: 1.1;
	}

	button {
		cursor: pointer;
	}

	h1,
	h2,
	h3,
	h4 {
		text-wrap: balance;
	}

	a:not([class]) {
		text-decoration-skip-ink: auto;
		color: currentColor;
	}

	img,
	picture {
		max-width: 100%;
		display: block;
	}

	figure {
		margin: 0;
		padding: 0;
	}

	dialog {
		padding: 0;
	}

	input,
	button,
	textarea,
	select {
		font-family: inherit;
		font-size: inherit;
		line-height: inherit;
		letter-spacing: inherit;
	}

	textarea:not([rows]) {
		min-height: 10em;
	}

	:target {
		scroll-margin-block: 5ex;
	}
}

@layer base {
	:root {
		/* Font Family*/
		--sans-font: "Inter", sans-serif;
		--serif-font: "EB Garamond", serif;
		--heading-font: var(--serif-font);

		/* Font Details */
		--ls-s: -0.02em;
		--ls-m: -0.05em;
		--heading-ls: var(--ls-s);
		--text-ls: var(--ls-m);

		--heading-lh: 1.4;

		/* Font Sizes */
		--step--1: 0.875rem; /* 14px */
		--step-1: 1rem; /* 16px */
		--step-2: 1.25rem; /* 20px */

		/* Font Weight */
		--fw-medium: 500;
		--fw-semi-bold: 600;
		--fw-bold: 700;

		/* Radius */
		--radius-s: 8px;
		--radius-m: 24px;
		--radius-l: 40px;
		--radius-xl: 48px;
		--raduis-round: 50%;
		--radius-button: var(--radius-xl);

		/* Spacing */
		--spacing-d: 4px;
		--spacing-s: 8px;
		--spacing-m: 12px;
		--spacing-l: 16px;
		--spacing-xl: 24px;
		--spacing-xxl: 32px;
		--spacing-xxxl: 40px;
		--spacing-vl: 48px;

		/* Shadow */
		--library--shadow--book: 0px 12px 15.399999618530273px
			rgba(164, 155, 155, 0.25);
		--library--shadow--notify: 0px 12px 15.399999618530273px
			rgba(164, 155, 155, 0.25);
		--library--shadow--book-hover: 18px 36px 30px rgba(120, 116, 116, 0.25);

		/* White and Black */
		--library--white--main: rgba(255, 255, 255, 1);
		--library--black--main: rgba(20, 20, 20, 1);

		/* Greys */
		--library--grey--main: rgba(200, 200, 200, 1);
		--library--grey--text: rgba(170, 170, 170, 1);
		--library--grey--stroke: rgba(236, 236, 236, 1);

		/* Accent and Book Colors */
		--library--book--orange-fill: rgba(255, 95, 2, 1);
		--library--book--orange-stroke: rgba(255, 118, 39, 1);
		--library--book--orange-binder: rgba(170, 46, 1, 1);
		--library--book--text-on-orange: rgba(78, 21, 0, 1);

		--library--book--blue-fill: rgba(2, 145, 255, 1);
		--library--book--blue-stroke: rgba(39, 140, 255, 1);
		--library--book--blue-binder: rgba(1, 97, 170, 1);
		--library--book--text-on-blue: rgba(0, 36, 78, 1);

		--library--book--purple-fill: rgba(145, 2, 255, 1);
		--library--book--purple-stroke: rgba(110, 2, 193, 1);
		--library--book--purple-binder: rgba(116, 0, 205, 1);
		--library--book--text-on-purple: rgba(239, 226, 255, 1);

		--library--book--pink-fill: rgba(255, 2, 108, 1);
		--library--book--pink-stroke: rgba(234, 3, 99, 1);
		--library--book--pink-binder: rgba(209, 0, 88, 1);
		--library--book--text-on-pink: rgba(43, 0, 18, 1);

		--library--book--red-fill: rgba(255, 36, 2, 1);
		--library--book--red-stroke: rgba(255, 59, 29, 1);
		--library--book--red-binder: rgba(205, 31, 3, 1);
		--library--book--text-on-red: rgba(55, 8, 1, 1);

		--library--book--green-fill: rgba(0, 127, 36, 1);
		--library--book--green-stroke: rgba(0, 88, 25, 1);
		--library--book--green-binder: rgba(1, 146, 42, 1);
		--library--book--text-on-green: var(--library--white--main);

		/* Light Colors */
		--library--background-fill: rgba(238, 238, 238, 1);
		--library--text-on-bg: var(--library--black--main);
		--library--faint-text-on-bg: rgba(79, 79, 79, 1);
		--library--elevated-fill: rgba(224, 224, 224, 1);
		--library--text-on-elevated: rgba(130, 130, 130, 1);
		--library--elevated-stroke: rgba(216, 216, 216, 1);
		--library--action--background: var(--library--black--main);
		--library--action--text-on-bg: var(--library--white--main);
		--library--action--elevated-fill: rgba(39, 39, 39, 1);
		--library--action-text-on-elevated: var(--library--grey--main);
		--library--action--elevated-stroke: rgba(58, 55, 55, 1);
		--library--shadow--button-shadow: 0px 13px 12.899999618530273px
				rgba(159, 157, 157, 0.25),
			inset 3px 4px 4px rgba(211, 211, 211, 0.25),
			inset -9px -4px 4px rgba(211, 211, 211, 0.25);

		/* Dark Colors */
		@media (prefers-color-scheme: dark) {
			--library--background-fill: rgba(4, 4, 4, 1);
			--library--text-on-bg: var(--library--white--main);
			--library--faint-text-on-bg: var(--library--grey--main);
			--library--elevated-fill: rgba(39, 39, 39, 1);
			--library--text-on-elevated: var(--library--grey--main);
			--library--elevated-stroke: rgba(58, 55, 55, 1);
			--library--action--background: var(--library--white--main);
			--library--action--text-on-bg: var(--library--black--main);
			--library--action--elevated-fill: rgba(224, 224, 224, 1);
			--library--action-text-on-elevated: rgba(130, 130, 130, 1);
			--library--action--elevated-stroke: rgba(216, 216, 216, 1);
			--library--shadow--button-shadow: 0px 13px 12.899999618530273px
					rgba(159, 157, 157, 0.25),
				inset 3px 4px 4px rgba(211, 211, 211, 0.25),
				inset -9px -4px 4px rgba(211, 211, 211, 0.25);
		}
	}
}

@layer structure {
	body {
		background: var(--library--background-fill);
		font-family: var(--sans-font);
		letter-spacing: var(--text-ls);
		padding-block: var(--spacing-vl);
	}

	.container {
		max-width: 1080px;
		margin-inline: auto;
		padding-inline: var(--spacing-xxl);

		@media (width <= 420px) {
			padding-inline: var(--spacing-xl);
		}
	}

	.text {
		color: var(--library--text-on-bg);

		&.subtle {
			color: var(--library--faint-text-on-bg);
		}
	}

	.column {
		display: flex;
		flex-direction: column;
		align-items: start;
		gap: var(--spacing-m);
	}

	.bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.stack-flow {
		display: flex;
		flex-wrap: wrap;
	}

	.grid-flow {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 48px 30px;
	}
}

@layer styling {
	.logo {
		display: flex;
		align-items: center;
		gap: var(--spacing-s);

		font-weight: var(--fw-semi-bold);
		font-size: var(--step-2);
		color: var(--library--action--background);

		img {
			width: 24px;
			height: 24px;
		}

		.underline {
			text-decoration: underline;
		}
	}

	.pill {
		display: inline-block;
		background: var(--library--elevated-fill);
		padding: 4px 10px;
		color: var(--library--text-on-elevated);
		border-radius: var(--radius-xl);
		font-weight: var(--fw-medium);

		&.cased {
			border: 1px solid var(--library--elevated-stroke);
		}
	}

	.holder {
		display: flex;
		gap: var(--spacing-m);
		align-items: center;

		svg path {
			fill: var(--library--elevated-fill);
		}
	}

	.btn {
		background: var(--library--action--background);
		color: var(--library--action--text-on-bg);
		padding: var(--spacing-s);
		border: none;
		border-radius: var(--radius-button);
		box-shadow: var(--library--shadow--button-shadow);

		display: flex;
		gap: var(--spacing-d);
		align-items: center;

		.btn-svg {
			/* vertical-align: top; */
			width: 20px;
			height: 20px;

			g path {
				fill: var(--library--action--text-on-bg);
			}
		}

		.text {
			color: inherit;
			display: none;
			opacity: 0;
			transform: translateY(100%);
			transition: opacity 1s ease, transform 0.4s ease;
			transition-behavior: allow-discrete;
		}

		&#main-btn {
			position: fixed;
			bottom: 52px;
			left: 0;
			right: 0;
			margin-inline: auto;
			width: fit-content;
		}

		&:hover {
			.text {
				display: block;
				opacity: 1;
				transform: none;

				@starting-style {
					opacity: 0;
					transform: translateY(100%);
				}
			}
		}

		&.fixed {
			.text {
				display: block;
				opacity: 1;
				transform: none;
			}

			&:hover {
				.text {
					display: block;
				}
			}
		}

		&.reversed {
			background: var(--library--action--text-on-bg);
			color: var(--library--action--background);

			.btn-svg {
				g path {
					fill: var(--library--action--background);
				}
			}
		}
	}

	.article {
		gap: var(--spacing-xxl);
		/* width: 242px; */
	}

	.close {
		width: var(--spacing-xxl);
		height: var(--spacing-xxl);
		border: 1px solid var(--library--action--elevated-stroke);
		border-radius: var(--raduis-round);
		background: var(--library--action--background);

		display: grid;
		place-content: center;

		svg g path {
			fill: var(--library--action--text-on-bg);
		}
	}

	.book {
		--fill: var(--library--book--orange-fill);
		--binder: var(--library--book--orange-binder);
		--stroke: var(--library--book--orange-stroke);
		--color: var(--library--book--text-on-orange);

		background: var(--fill);
		color: var(--color);
		border-radius: var(--radius-s);
		border: 1px solid var(--stroke);
		padding: var(--spacing-m) var(--spacing-l) var(--spacing-m)
			var(--spacing-xl);
		box-shadow: var(--library--shadow--book);
		max-width: 345px;
		position: relative;
		transition: box-shadow 0.4s ease;

		h2,
		p {
			margin: 0;
		}

		p + h2 {
			margin-block-start: var(--spacing-d);
		}

		h2 {
			color: var(--library--white--main);
			font-family: var(--heading-font);
			line-height: var(--heading-lh);
			letter-spacing: var(--heading-ls);
			font-size: var(--step-2);
		}

		p {
			font-weight: var(--fw-medium);
		}

		.page {
			font-weight: var(--fw-bold);
			margin-block: var(--spacing-vl);
			padding-block-end: var(--spacing-l);
		}

		.author {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.title {
			height: 84px;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.icon {
			position: absolute;
			top: 0;
			right: var(--spacing-m);

			path {
				fill: var(--binder);
			}
		}

		&::before {
			content: "";
			width: 4px;
			height: 100%;
			background: var(--binder);
			position: absolute;
			top: 0;
			left: var(--spacing-s);
		}

		&[data-read="false"] {
			.icon {
				display: none;
			}
		}

		&[data-color="blue"] {
			--fill: var(--library--book--blue-fill);
			--binder: var(--library--book--blue-binder);
			--stroke: var(--library--book--blue-stroke);
			--color: var(--library--book--text-on-blue);
		}

		&[data-color="purple"] {
			--fill: var(--library--book--purple-fill);
			--binder: var(--library--book--purple-binder);
			--stroke: var(--library--book--purple-stroke);
			--color: var(--library--book--text-on-purple);
		}

		&[data-color="pink"] {
			--fill: var(--library--book--pink-fill);
			--binder: var(--library--book--pink-binder);
			--stroke: var(--library--book--pink-stroke);
			--color: var(--library--book--text-on-pink);
		}

		&[data-color="red"] {
			--fill: var(--library--book--red-fill);
			--binder: var(--library--book--red-binder);
			--stroke: var(--library--book--red-stroke);
			--color: var(--library--book--text-on-red);
		}

		&[data-color="green"] {
			--fill: var(--library--book--green-fill);
			--binder: var(--library--book--green-binder);
			--stroke: var(--library--book--green-stroke);
			--color: var(--library--book--text-on-green);
		}

		.delete {
			display: flex;
			align-items: center;
			gap: var(--spacing-s);
			padding-block: var(--spacing-m);
			position: absolute;
			top: 0;
			right: 0;
			transform: translateY(-90%) translateX(18px);
			opacity: 1;
			transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
				opacity 0.6s ease;
			transition-behavior: allow-discrete;

			@starting-style {
				transform: translateY(-75%);
				opacity: 0;
			}

			.close {
				width: 40px;
				height: 40px;
				transform: rotate(-17.39deg);
			}

			.text {
				font-size: var(--step--1);
			}

			display: none;
		}

		&:hover {
			box-shadow: var(--library--shadow--book-hover);

			.delete {
				display: flex;
			}
		}
	}

	.empty {
		display: grid;
		place-content: center;

		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		z-index: -1;

		.column {
			align-items: center;
			gap: var(--spacing-s);

			.empty-svg {
				g path {
					fill: var(--library--elevated-fill);
				}
			}
		}

		p {
			color: var(--library--faint-text-on-bg);
			margin: 0;
		}

		&[data-visible="false"] {
			display: none;
		}
	}

	#formDialog {
		border: none;
		max-width: 360px;
		margin-block-start: auto;
		margin-block-end: 100px;
		border-radius: var(--radius-m);
		background: var(--library--action--background);
		color: var(--library--action--text-on-bg);
		overflow: visible;

		&::backdrop {
			background: none;
		}

		.form {
			padding: var(--spacing-l);

			.bar {
				margin-block-end: var(--spacing-s);

				img {
					width: var(--spacing-xxl);
					height: var(--spacing-xxl);
				}

				h2 {
					font-size: var(--step-1);
					margin: 0;
				}
			}

			input,
			select {
				border: none;
				padding: var(--spacing-s);
				background: var(--library--action--background);
				color: var(--library--action--text-on-bg);
			}

			input::placeholder {
				font-weight: var(--fw-bold);
				color: var(--library--grey--text);
			}

			.close {
			}

			input:focus,
			input:active,
			select:focus,
			select:active {
				outline: 2px solid var(--library--book--orange-fill);
				border-radius: var(--radius-s);
			}

			select {
				color: var(--library--grey--text);
				font-weight: var(--fw-bold);

				option {
					color: var(--library--action--text-on-bg);
				}
			}

			&.column {
				align-items: stretch;
				gap: var(--spacing-s);
				width: min(360px, calc(100vw - 32px));

				.btn {
					align-self: center;
					margin-block-start: var(--spacing-l);
				}
			}
		}

		.error-bar {
			background: var(--library--book--red-fill);
			max-width: 360px;
			width: 100%;
			padding-block: 10px;
			padding-inline: var(--spacing-xl);
			border-radius: var(--spacing-l);
			box-shadow: var(--library--shadow--notify);
			position: absolute;
			top: 0;
			transform: translateY(-115%);

			&[data-visible="false"] {
				display: none;
			}
		}
	}

	.notify-holder {
		position: fixed;
		bottom: 96px;
		right: 24px;
		margin-inline-start: 24px;

		&.column {
			align-items: end;
		}

		.notification {
			max-width: 360px;
			padding-block: 10px;
			padding-inline: var(--spacing-xl);
			border-radius: var(--spacing-l);
			background: var(--library--action--background);
			color: var(--library--action--text-on-bg);
			box-shadow: var(--library--shadow--notify);

			opacity: 1;
			transform: none;
			transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
				opacity 0.6s ease;
			transition-behavior: allow-discrete;

			@starting-style {
				opacity: 0;
				transform: translateY(100%);
			}
		}
	}
}