@import '@sharedStyles/core.less';
@import '@themes/assets/assets.less';
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');

.brewItem {
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	overflow: hidden;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	.thumbnail {
		position: absolute;
		top: 0;
		right: 0;
		z-index: -1;
		width: 150px;
		height: 100%;
		background-repeat: no-repeat;
		background-position: right top;
		background-size: contain;
	}
	.text {
		h4 {
			margin-bottom: 5px;
			font-size: 2.2em;
		}
	}
	.info {
		position: initial;
		bottom: 2px;
		font-size: 1.2em;
		& > span {
			line-height: 1.5em;
		}
		a {
			color: inherit;
		}
	}
	.brewTags span {
		display: inline-block;
		padding: 2px;
		margin: 2px;
		font-weight: bold;
		white-space: nowrap;
		cursor: pointer;
		background-color: #c8ac6e3b;
		border: 1px solid #c8ac6e;
		border-color: currentColor;
		border-radius: 4px;
		&::before {
			margin-right: 3px;
			font-family: 'Font Awesome 6 Free';
			font-size: 12px;
		}
		&.type {
			color: #008000;
			background-color: #0080003b;
			&::before {
				content: '\f0ad';
			}
		}
		&.group {
			color: #000000;
			background-color: #5050503b;
			&::before {
				content: '\f500';
			}
		}
		&.meta {
			color: #000080;
			background-color: #0000803b;
			&::before {
				content: '\f05a';
			}
		}
		&.system {
			color: #800000;
			background-color: #8000003b;
			&::before {
				content: '\f518';
			}
		}
	}
	&:nth-child(2n + 1) {
		margin-right: 0px;
	}
	.links {
		text-align: center;
		background-color: fade(black, 60%);
		a,
		button {
			.animate(opacity);
			display: block;
			margin: 8px 0px;
			font-size: 1.3em;
			color: white;
			text-decoration: unset;
			opacity: 0.6;
			width: 100%;
			&:hover {
				opacity: 1;
			}
			i {
				cursor: pointer;
			}
		}
	}
	.googleDriveIcon {
		padding: 0px;
		margin: -5px;
		height: 18px;
	}
	.homebreweryIcon {
		position: relative;
		padding: 0px;
		top: 5px;
		left: -7.5px;
		height: 18px;
	}
}

.grid > .brewItem {
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	width: clamp(300px, 48%, 600px);
	min-height: 125px;
	padding: 5px 15px 2px 6px;
	padding-right: 15px;
	overflow: hidden;
	vertical-align: top;
	background-color: #cab2802e;
	background-image: url('https://ik.imagekit.io/5eCleric/background%20note.png');
	background-size: cover;
	border: 1px solid #c9ad6a;
	border-radius: 5px;
	box-shadow: 0px 4px 5px 0px #333333;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	isolation: isolate;
	.thumbnail {
		position: absolute;
		top: 0;
		right: 0;
		z-index: -1;
		width: 155px;
		height: 100%;
		background-repeat: no-repeat;
		background-position: right top;
		background-size: contain;
		opacity: 50%;
		-webkit-mask-image: linear-gradient(80deg, #00000000 20%, #005500 40%);
		mask-image: linear-gradient(80deg, #00000000 20%, #005500 40%);
	}
	.text {
		min-height: 54px;
		h2 {
			margin-bottom: 5px;
			font-size: 1.3em;
		}
	}
	.info {
		position: initial;
		bottom: 2px;

		font-size: 0.9em;
		& > span {
			margin-right: 12px;
			line-height: 1.5em;
		}
	}
	.brewTags span {
		display: inline-block;
		padding: 2px;
		margin: 2px;
		font-weight: bold;
		white-space: nowrap;
		cursor: pointer;
		background-color: #c8ac6e3b;
		border: 1px solid #c8ac6e;
		border-color: currentColor;
		border-radius: 4px;
		&::before {
			margin-right: 3px;
			font-family: 'Font Awesome 6 Free';
			font-size: 12px;
		}
		&.type {
			color: #008000;
			background-color: #0080003b;
			&::before {
				content: '\f0ad';
			}
		}
		&.group {
			color: #000000;
			background-color: #5050503b;
			&::before {
				content: '\f500';
			}
		}
		&.meta {
			color: #000080;
			background-color: #0000803b;
			&::before {
				content: '\f05a';
			}
		}
		&.system {
			color: #800000;
			background-color: #8000003b;
			&::before {
				content: '\f518';
			}
		}
	}
	&:hover,
	&:focus-within {
		.links {
			opacity: 1;
		}
	}
	.links {
		.animate(opacity);
		position: absolute;
		top: 0px;
		right: 0px;
		width: 2em;
		height: 100%;
		text-align: center;
		background-color: fade(black, 60%);
		opacity: 0;
		a,
		button {
			.animate(opacity);
			display: block;
			margin: 8px 0px;
			font-size: 1.3em;
			color: white;
			text-decoration: unset;
			opacity: 0.6;
			width: 100%;
			&:hover {
				opacity: 1;
			}
			i {
				cursor: pointer;
			}
		}
	}
	.googleDriveIcon {
		padding: 0px;
		margin: -5px;
		height: 18px;
	}
	.homebreweryIcon {
		position: relative;
		padding: 0px;
		top: 5px;
		left: -7.5px;
		height: 18px;
	}
}

.list > .brewItem {
	height: 50px;
	min-height: unset;
	width: 100%;
	display: grid;
	grid-template-columns: 2fr 3fr 1fr;
	align-items: center;
	color: rgb(2, 2, 2);
	background: #efefef;
	overflow: visible;
	font-size: 12px;

	.text {
		min-height: unset;
		width: 100%;
		padding-inline: 10px;
		height: 100%;

		display: grid;
		align-content: center;

		h2 {
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			font-size: 20px;
			font-weight: 900;
			height: 100%;
			min-height: 1.4em;
			align-content: center;
			vertical-align: middle;
		}

		.description {
			display: none;
		}
	}

	.info {
		width: clamp(400px, 100%, 650px);
		display: grid;
		grid-template-areas: 'tags authors views pages update storage';
		justify-content: end;
		align-content: space-around;
		align-items: center;
		grid-template-columns: 2fr 1.5fr 0.7fr 0.6fr 1.5fr 20px;
		br {
			display: none;
		}
		.brewTags {
			display: inline-block;
			grid-area: tags;
			min-width: 100px;
		}
		.brewAuthors {
			display: inline-block;
			grid-area: authors;
			height: fit-content;
			width: 150px;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;

			&:has(a:only-of-type) {
				width: fit-content;
			}
		}

		.lastViewed {
			display: inline-block;
			grid-area: views;
			min-width: 50px;
		}
		.brewPages {
			display: inline-block;
			grid-area: pages;
			min-width: 40px;
		}
		[title*='Created'] {
			display: inline-block;
			grid-area: update;
		}
		[title*='Storage'] {
			display: inline-block;
			grid-area: storage;
			filter: drop-shadow(0 0 10px white);
		}

		.brewTags:has(span:nth-of-type(4)) {
			position: relative;
			overflow: hidden;
			display: flex;
			flex-wrap: wrap;

			span:nth-of-type(n + 2) {
				display: none;
			}

			&:hover {
				overflow: visible;
				position: absolute;
				top: 0;
				background: #707070;
				height: max-content;
				z-index: 100;
				width: min-content;
				padding: 10px;

				span:nth-of-type(n + 4) {
					display: block;
				}

				&:after {
					position: absolute;
					top: 48px;
					right: 0;
					left: 0;
					bottom: 0;
					content: '';
					display: block;
					height: calc(100% - 48px);
					background: #707070;
					border-inline: 1px solid gold;
					border-bottom: 1px solid gold;
					border-bottom-left-radius: 5px;
					border-bottom-right-radius: 5px;
					z-index: -1;
				}
			}
		}
	}

	.links {
		opacity: 1;
		background: none;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		width: 100%;
		align-items: center;
		height: 100%;

		> a {
			opacity: 0.8;

			&:hover {
				opacity: 1;
			}
		}

		.editLink {
			color: @green;
		}
		.deleteLink {
			color: @red;
		}

		.shareLink {
			color: deepskyblue;
		}

		.downloadLink {
			color: coral;
		}
	}
}

.card > .brewItem {
	background-color: grey;
	background-image: url('@themes/assets/naturalCritLogoBlack.svg');
	background-size: 60%;
	background-position: center 20%;
	background-repeat: no-repeat;
	background-blend-mode: soft-light;
	width: 300px;
	height: 400px;
	border: 1px solid;
	margin: 10px;
	border-radius: 10px;
	padding: 10px;
	padding-top: 100px;
	padding-bottom: 50px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	isolation: isolate;
	position: relative;
	color: white;
	font-size: 13px;

	&::before {
		display: block;
		content: '';
		height: 50%;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-image: linear-gradient(0deg, #777f 0, #7770 90%);
		z-index: -1;
		transition: height 0.2s;
	}

	&:hover {
		&::before {
			height: 100%;
			background-image: linear-gradient(0deg, #777f 0, #777f 42%, #7770 55%);
		}
		.text .description {
			height: fit-content;
		}
	}

	.thumbnail {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -2;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: right top;
		background-size: cover;
	}

	.text {
		filter: drop-shadow(0 1px 4px black);

		h2 {
			font-weight: 900;
			font-size: 1.2em;
		}

		.description {
			height: 0;
			overflow: hidden;
			transition: height 0.2s;
		}
	}

	.info {
		filter: drop-shadow(0 1px 2px black);
		height: 130px;
		display: grid;
		grid-template-areas:
			'tags tags tags'
			'authors authors authors'
			'pages views views'
			'update update storage';

		.brewTags {
			color: black;
			grid-area: tags;

			i {
				color: white;
			}
			> span {
				background: hsl(from currentColor h 20% 80%);
			}
		}
		.brewAuthors {
			grid-area: authors;
		}
		.brewPages {
			grid-area: pages;
		}
		.lastViewed {
			grid-area: views;
		}
		.lastUpdated {
			grid-area: update;
		}
		.storage {
			grid-area: storage;
		}
	}

	.links {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40px;
		display: flex;
	}
}

@media screen and (max-width: 1400px) {
	.brewCollection .brewGroup {
		&.list {
			.brewItem:not(.detailsOpen) {
				grid-template-columns: 3fr 2.5fr 1fr;
				.info {
					width: clamp(200px, 100%, 650px);
					grid-template-columns: 2fr 1fr 20px;
					grid-template-areas: 'tags update storage';
				}

				.brewPages,
				.lastViewed,
				.brewAuthors {
					display: none;
				}
			}
			.brewItem {
				transition: height 0.2s;
			}
			.detailsOpen {
				height: 70px;
			}
		}
	}
}

@media screen and (max-width: 1200px) {
	.brewCollection .brewGroup {
		&.list {
			.brewItem:not(.detailsOpen) {
				grid-template-columns: 3fr 2fr 1fr;
				.info {
					width: clamp(200px, 100%, 650px);
					grid-template-columns: 1fr 20px;
					grid-template-areas: 'tags storage';
				}

				.brewPages,
				.lastViewed,
				.brewAuthors,
				.lastUpdated {
					display: none;
				}
			}
			.detailsOpen {
				grid-template-columns: 3fr 2fr 1fr;

				.info {
					width: clamp(200px, 100%, 650px);
					display: grid;
					grid-template-columns: 2fr 1fr 1fr;
					grid-template-rows: 1fr 1fr;
					grid-template-areas:
						'tags views pages'
						'authors update storage';
				}
				.lastUpdated {
					width: 100px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					word-break: break-all;
				}
			}
		}
	}
}

@media screen and (max-width: 800px) {
	.brewCollection .brewGroup {
		&.list {
			.brewItem:not(.detailsOpen) {
				.info {
					width: clamp(200px, 100%, 650px);
					grid-template-columns: 1fr;
					grid-template-areas: 'tags';
				}

				.brewPages,
				.lastViewed,
				.brewAuthors,
				.lastUpdated,
				.storage {
					display: none;
				}
			}

			.brewItem {
				transition: height 0.2s;
			}
			.detailsOpen {
				height: 100px;
				padding: 5px;
				display: grid;
				grid-template-columns: 3fr 3fr 30px;

				.text {
					height: 100%;
					padding: 0;

					h2 {
						height: fit-content;
						white-space: wrap;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
					}
				}

				.info {
					height: 100%;
					width: 100%;
					display: grid;
					grid-template-columns: 2fr 1fr 1fr 20px;
					grid-template-areas:
						'tags pages views views'
						'authors update update storage';
				}
				.links {
					display: flex;
					flex-direction: column;
					gap: 5px;
					a,
					button {
						margin: 0;
					}
				}
			}
		}
	}
}

@media screen and (max-width: 650px) {
	.brewCollection .brewGroup {
		&.list {
			.brewItem:not(.detailsOpen) {
				grid-template-columns: 3fr 1fr;
				.info {
					display: none;
				}
			}
			.detailsOpen {
				grid-template-rows: 1fr 2fr;
				.info {
					display: grid;

					.lastUpdated {
						width: 100px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						word-break: break-all;
					}
				}
			}
		}
	}
}