@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: 48%;
	min-width:400px;
	min-height: 125px;
	padding: 5px 15px 2px 6px;
	padding-right: 15px;
	margin-right: 15px;
	margin-bottom: 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: .9em;
		& > span {
			margin-right: 12px;
			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';
			}
		}
	}
	&:hover,
	&:focus-within {
		.links {
			opacity: 1;
		}
	}
	&:nth-child(2n) {
		margin-right: 0px;
	}
	.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 2fr 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;
		}
	}

	hr {
		display: none;
	}

	.info {
		width: 100%;
		display: grid;
		grid-template-areas: 'tags authors views pages update storage';
		justify-content: end;
		align-content: space-around;
		align-items:center;
		grid-template-columns: 200px 150px 70px 60px 150px 20px;
		br {
			display: none;
		}
		.brewTags {
			display: inline-block;
			grid-area: tags;
		}
		[title*='Authors:'] {
			display: inline-block;
			grid-area: authors;
			height: 40px;
			overflow: hidden;
			width: 150px;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}
		[title*='Last'] {
			display: inline-block;
			grid-area: views;
		}
		[title*='Page'] {
			display: inline-block;
			grid-area: pages;
		}
		[title*='Created'] {
			display: inline-block;
			grid-area: update;
		}
		[title*='Storage'] {
			display: inline-block;
			grid-area: storage;
			filter: drop-shadow(0 0 10px white);
		}

		.brewTags {
			padding-left: 10px;
		}

		.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;
	

	&::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 .2s;
		}
	}

	.info {
		filter:drop-shadow(0 1px 2px black);
		height: 130px;
		display:grid;
		grid-template-areas:
		"tags tags tags"
		"author author author"
		"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: author;
		}
		.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;
	}

}