@import "reset.css";

.header,
.footer-container {
	background-color: light-dark(var(--bg-blue), var(--bg-dark-blue));
}

.header {
	position: relative;
	margin-block-end: var(--space-lg);
	padding: var(--space-md);
	text-align: center;
	box-shadow: var(--shadow-header);

	& .__title {
		font-size: clamp(var(--text-lg), 3vw + var(--text-sm), var(--text-xxl));
		color: light-dark(var(--text-gray), var(--text-white));
	}
}

.added {
	justify-self: center;
	position: absolute;
	background-color: light-dark(var(--bg-light-green), var(--bg-green));
	border-radius: var(--br-r);
	opacity: 0;
	padding: var(--space-sm);
	color: light-dark(var(--text-gray), var(--text-white));
	z-index: 9;
	animation: alert 0.5s ease-in-out forwards;
}

@keyframes alert {
	from {
		opacity: 0;
		top: 0;
	}

	to {
		display: block;
		opacity: 1;
		top: 50%;
	}
}

.main {
	margin-block-end: var(--space-lg);
}

.search-container {
	margin-block-end: var(--space-r);
	padding: var(--space-sm);
}

.__input {
	background-color: light-dark(var(--bg-white), var(--bg-darker-01));
	border: 1px solid light-dark(var(--bg-darker-01), var(--bg-white));
	border-radius: var(--br-r);
}

.__input::placeholder {
	color: light-dark(var(--text-dark-gray), var(--text-gray));
}

.__input:focus-visible {
	border: 1px solid light-dark(var(--bg-blue), var(--bg-dark-blue));
}

.search {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	justify-content: center;
	max-width: 45em;
	min-width: 15em;
	width: 100%;
	margin-inline: auto;

	& .__input {
		anchor-name: --search-input;
		height: 2.75rem;
		width: 90%;
	}

	& .__search {
		padding-inline-end: calc(var(--space-xxl) + 0.5em);
	}

	& .__search::-webkit-search-cancel-button {
		display: none;
	}

	& .__clear {
		position: absolute;
		inset-inline-end: anchor(--search-input 97%, 17%);
		opacity: 0;
		will-change: opacity;
		transition: opacity 0.3s ease-in;
	}

	& .__clear:focus-visible {
		opacity: 1;
		border-radius: 50%;
		outline: 1px dashed light-dark(var(--bg-black), var(--bg-white));
	}

	& .__search-btn {
		height: 1.75rem;
		width: 1.75rem;
	}

	& .__search-btn:focus-visible {
		border-radius: 50%;
		outline: 1px dashed light-dark(var(--bg-black), var(--bg-white));
		outline-offset: var(--space-xxs);
	}
}
	.__img {
		fill: light-dark(var(--bg-black), var(--bg-white));
		height: 100%;
	}

.button-container {
	display: flex;
	gap: var(--space-md);
	justify-content: flex-end;
	margin-block-end: var(--space-md);
	margin-inline: auto;
	max-width: 45em;
	padding: var(--space-sm);
}

.btn {
	background-color: light-dark(var(--bg-blue), var(--bg-dark-blue));
	border-radius: var(--br-r);
	padding: var(--space-xs);
	color: var(--text-gray);
	-webkit-tap-highlight-color: transparent;
}

.btn:focus-visible {
	border: none;
	outline: 1px dashed light-dark(var(--bg-black), var(--bg-white));
	outline-offset: var(--space-xxs);
}

@media (hover: hover) {
	.btn:hover {
		background-color: light-dark(var(--bg-dark-blue), var(--bg-blue));
	}
}

.btn:active {
	background-color: var(--bg-light-blue);
}

.__text{
	-webkit-tap-highlight-color: transparent;
}

.__mark {
	align-self: flex-start;
}

.add-book-modal {
	position: absolute;
	inset-block-start: 50%;
	background-color: light-dark(var(--bg-white), var(--bg-darker-01));
	border: none;
	border-radius: var(--br-lg);
	margin-inline: auto;
	max-height: calc(100% - var(--space-lg));
	overflow: auto;
	padding: var(--space-sm);
	scrollbar-width: none;
	transform: translateY(-50%);

	&::-webkit-scrollbar {
		width: 0;
	}

	&:open {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
		width: 90%;
		max-width: 31.25em;
		min-width: 12.5em;
	}

	& .__close {
		align-self: flex-end;
	}

	& .__close:focus-visible {
		outline: 2px solid light-dark(var(--bg-black), var(--bg-white));
	}

	& .__img {
		height: 1.75rem;
	}

	& .__form {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-sm);
		padding: var(--space-sm);
	}

	& .__form-title,
	& .__input:last-of-type {
		margin-block-end: var(--space-md);
	}

	& .__form-title {
		font-size: var(--text-lg);
		text-align: center;
	}

	& .__text {
		align-self: flex-start;
		text-align: start;
	}

	& .__img-cover {
		display: block;
		height: 100%;
		margin-inline: auto;
	}

	& .__mark {
		user-select: none;
	}

	& .__cover {
		height: 100%;
		padding: 0;
		width: 100%;
	}

	& .__input:is([type="text"], [type="number"], [type="url"]) {
		width: 100%;
		font-size: var(--text-sm);
	}

	& .__preview {
		background-color: light-dark(var(--bg-gray), var(--bg-black));
		border-radius: var(--br-r);
		height: 10rem;
		width: 100%;
		line-height: 10rem;
		text-align: center;
	}

	& .__save {
		width: 40%;
		max-width: 10em;
	}
}

.__read-check {
	appearance: none;
	margin-inline-end: var(--space-xs);
	padding: 0;
}

.__read-check:focus-visible {
	border-radius: 50%;
	outline: 1px dashed light-dark(var(--bg-black), var(--bg-white));
	outline-offset: 0.2rem;
}

.__read-check::before {
content:
	light-dark(
		url("../img/icon/star-plus-black.svg"),
		url("../img/icon/star-plus-white.svg")
	);
	display: inline-block;
	height: 1.5rem;
	vertical-align: top;
}

.__read-check:checked::before {
	content:
		light-dark(
			var(--star-check-black),
			var(--star-check-white)
		);
	display: inline-block;
	height: 1.5rem;
	width: 1.5rem;
}

.book-container {
	display: grid;
	gap: var(--space-md);
	grid-auto-rows: min-content;
	grid-template-columns: repeat(auto-fit, minmax(15em, 20em));
	justify-content: center;
	margin-inline: auto;
	padding-inline: var(--space-sm);
	max-width: 70rem;
	will-change: height;
	transition: height 0.3s ease-in;
}

.book {
	position: relative;
	background-color: light-dark(var(--bg-white), var(--bg-darker-01));
	border: 2px solid light-dark(var(--bg-black), var(--bg-white));
	border-radius: var(--br-lg);
	margin-inline: auto;
	width: 100%;
	padding: var(--space-sm);
	box-shadow: var(--shadow-book);

	& .__checkbox {
		position: absolute;
		display: none;
		appearance: none;
		border: 1px solid light-dark(var(--bg-black), var(--bg-white));
		border-radius: var(--br-sm);
		height: var(--space-r);
		padding: revert;
		width: var(--space-r);
		cursor: pointer;
	}

	& .__checkbox:focus-visible {
		border: 1px dashed black;
	}

	& .__checkbox:checked {
		background-color: var(--bg-green);
	}

	& .__checkbox:checked::after {
		content: "";
		display: inline-block;
		border: 2.75px solid var(--bg-white);
		border-block-end-width: 0;
		border-inline-start-width: 0;
		height: var(--space-xs);
		width: var(--space-sm);
		line-height: var(--space-xs);
		transform: rotate(135deg) translate(-0.45rem, 0.15rem);
	}

	& .__cover {
		background-color: light-dark(var(--bg-gray), var(--bg-black));
		border-radius: var(--br-r);
		height: 15rem;
		margin-block-end: var(--space-r);
	}

	& .__title,
	& .__detail {
		margin-block-end: var(--space-md);
	}

	& .__title,
	& .__vol,
	& .__author {
		text-overflow: ellipsis;
		white-space: nowrap;

	}

	& .__title {
		margin-inline: auto;
		font-size: var(--text-r);
		text-align: center;
	}

	& .__link:focus-visible {
		border-radius: var(--br-sm);
		outline: 0.06em dashed light-dark(var(--bg-black), var(--bg-white));
	}

	& .__link:link {
		color: light-dark(var(--text-dark-red), var(--text-red));
	}

	& .__link:visited {
		color: light-dark(var(--text-dark-green), var(--text-light-green));
	}

	& .__text {
		anchor-name: --mark-as-read;
		user-select: none;
	}

	& .__edit {
		position: absolute;
		inset-block-end: anchor(--mark-as-read bottom, 4%);
		inset-inline-end: 5%;
		display: none;
	}
}

.__read-check {
	cursor: pointer;
}

.footer-container {
	padding: var(--space-md);
}

.footer {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	justify-content: center;

	& .profile {
		border-radius: 50%;
		height: 2em;
		width: 2em;
		text-align: center;
	}

	& .__text,
	& .__link:any-link {
		color: light-dark(var(--text-gray), var(--text-white));
	}

	& .__text {
		font-weight: bold;
	}

	& .__link {
		text-decoration-line: underline;
	}
}


@media (min-width: 400px) {
	.search {
		& .__clear {
			inset-inline-end: anchor(--search-input 97%, 14%);
		}
	}
	.add-book-modal {

		& .__input:is([type="text"], [type="number"], [type="url"]) {
			font-size: var(--text-md);
		}
	}

	.book {
		padding: var(--space-md);
	}
}

.show-more {
	display: block;
	margin-block-start: var(--space-md);
	margin-inline: auto;
}

@media (min-width: 450px) {
	.search {
		& .__clear {
			inset-inline-end: anchor(--search-input 97%, 12%);
		}
	}
}

@media (min-width: 500px) {
	.search-container,
	.button-container {
		padding: var(--space-md);
	}
}

@media (min-width: 600px) {
	.search {
		& .__clear {
			inset-inline-end: anchor(--search-input 97%, 11%);
		}
	}
}

@media (min-width: 700px) {
	.search {
		& .__clear {
			inset-inline-end: anchor(--search-input 97%, 10%);
		}
	}
}

/* ||CSS UTILITY */
.hidden {
	display: none;
}

.overflow-hidden {
	overflow: hidden;
}

.img-size {
	object-fit: contain;
	object-position: center;
}