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

.brewItem {
	--bg-clr                    : #EEEEEE;
	--bg-image                  : @backgroundImageAlt;
	--text-clr                  : black;
	--text-shadow-clr           : white;
	--hb-logo: url('@themes/assets/naturalCritLogoBlack.svg');

	position                    : relative;
	display                     : flex;
	flex-direction              : column;
	overflow                    : hidden;
	font-size                   : 15px;
	color                       : var(--text-clr);
	background-color            : var(--bg-clr);
	background-image            : var(--bg-image);
	background-size             : cover;
	isolation                   : isolate;
	break-inside                : avoid;
	-webkit-column-break-inside : avoid;
	.thumbnail {
		position            : absolute;
		top                 : 0;
		right               : 30px;
		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 {
		h2 {
			font-family : 'Alata';
			font-size   : 1.25em;
		}
	}
	.info {
		a { color : inherit; }
		font-size   : 0.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;
		color:black;
		background : hsl(from currentColor h 20% 80%);
		border           : 1px solid currentColor;
		border-radius    : 4px;

		&::before {
			margin-right : 3px;
			font-family  : 'Font Awesome 6 Free';
			font-size    : 12px;
		}
		--tag-base       : #C8AC6E;
		--tag-type       : #008000;
		--tag-group      : #000000;
		--tag-meta       : #000080;
		--tag-system     : #800000;
		&.type {
			color            : var(--tag-type);
			&::before { content : '\f0ad'; }
		}
		&.group {
			color            : var(--tag-group);
			&::before { content : '\f500'; }
		}
		&.meta {
			color            : var(--tag-meta);
			&::before { content : '\f05a'; }
		}
		&.system {
			color            : var(--tag-system);
			&::before { content : '\f518'; }
		}
	}
	&:nth-child(2n + 1) { margin-right : 0; }
	.googleDriveIcon {
		height  : 18px;
		padding : 0;
		margin  : -5px;
	}
	.homebreweryIcon {
		position : relative;
		top      : 5px;
		left     : -7.5px;
		height   : 18px;
		padding  : 0;
	}
	.links {
		position         : absolute;
		right            : 0;
		display          : flex;
		height           : 100%;
		a,
		button {
			display         : block;
			align-content   : center;
			width           : 100%;
			height          : 100%;
			font-size       : 1.3em;
			text-align      : center;
			text-decoration : unset;
			cursor          : pointer;
			&:hover { background-color : hsl(from currentColor h 30% 90%); }
		}
		.shareLink { color : @yellow; }
		.editLink { color : @green; }
		.downloadLink { color : @blueLight; }
		.deleteLink { color : @red; }
	}
}

.darkMode .brewItem {
	--bg-clr                    : #444;
	--bg-image                  : @backgroundImageAltDark;
	--text-clr                  : #ddd;
	--text-shadow-clr           : black;
	--hb-logo: url('@themes/assets/naturalCritLogoWhite.svg');
}

.grid > .brewItem {
	justify-content  : space-between;
	width            : clamp(300px, 48%, 500px);
	min-height       : 125px;
	padding          : 7px 17px 7px 8px;
	padding-right    : 30px;
	border-radius    : 5px;
	box-shadow       : 0 4px 5px 0 #333333;
	.text {
		min-height : 54px;
		h2 { margin-bottom : 5px; }
		.description { padding-left : 5px; }
	}
	.info { padding-left : 5px; }
	.links {
		top              : 0;
		flex-direction   : column;
		width            : 2em;
		a,
		button {
			display         : block;
			width           : 100%;
			font-size       : 1.1em;
			i { cursor : pointer; }
		}
	}
}
.card > .brewItem {
	gap                   : 5px;
	justify-content       : flex-end;
	width                 : 300px;
	height                : 400px;
	padding               : 100px 10px 50px;
	background-image      : var(--hb-logo), var(--bg-image);
	background-repeat     : no-repeat;
	background-position   : center 20%, center;
	background-size       : 50%, cover;
	border                : 3px solid;
	border-radius         : 10px;
	box-shadow            : 0 4px 5px #222222;
	&::before {
		position         : absolute;
		right            : 0;
		bottom           : 0;
		left             : 0;
		z-index          : -1;
		display          : block;
		height           : 50%;
		content          : '';
		background-image : linear-gradient(0deg, var(--bg-clr) 0, hsl(from var(--bg-clr) h s l / 0) 90%);
		transition       : height @defaultDuration;
	}
	&:hover {
		&::before {
			height           : 100%;
			background-image : linear-gradient(0deg, var(--bg-clr) 0, var(--bg-clr) 55%, hsl(from var(--bg-clr) h s l / 0) 65%);
		}
		.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 : center top;
		background-size     : cover;
		opacity             : 1;
		mask-image          : unset;
	}
	.text {
		filter : drop-shadow(0 1px 4px var(--text-shadow-clr));
		h2 { font-weight : 900; }
		.description {
			height     : 0;
			overflow   : hidden;
			transition : height @defaultDuration;
		}
	}
	.info {
		display               : grid;
		grid-template-areas   : 'tags tags tags tags'
			'authors authors authors authors'
			'pages views . .'
			'update update storage .';
		grid-template-columns : 1fr 1fr 1fr 30px;
		height                : 110px;
		filter                : drop-shadow(0 1px 2px  var(--text-shadow-clr));
		.brewTags {
			grid-area : tags;
			color     : inherit;
			i { color : inherit;}
		}
		.brewAuthors { grid-area : authors; }
		.brewPages { grid-area : pages; }
		.lastViewed { grid-area : views; }
		.lastUpdated { grid-area : update; }
		.storage { grid-area : storage; }
	}
	.links {
		bottom   : 0;
		left     : 0;
		height   : 40px;
	}
}
.darkMode .card .brewItem {
	border-width:2px;
}
.list > .brewItem {
	display               : grid;
	grid-template-columns : 35% 3fr 150px;
	gap                   : 10px;
	align-items           : center;
	width                 : 100%;
	height                : 50px;
	.thumbnail { display  : none; }
	.text {
		padding-left : 10px;
		h2 {
			.ellipsis();
			align-content  : center;
			min-height     : 1.4em;
		}
		.description { display : none; }
	}
	.info {
		display               : grid;
		grid-template-areas   : 'tags authors pages views update storage';
		grid-template-columns : 2fr 150px   0.7fr 65px 1.5fr  20px;
		align-content         : space-around;
		align-items           : center;
		justify-content       : end;
		width                 : clamp(400px, 100%, 650px);
		br { display : none; }
		span { display : inline-block; margin  : 0; }
		.brewTags {
			display     : inline-flex;
			flex-wrap   : wrap;
			grid-area   : tags;
			align-items : center;
			width       : 100%;
			i, span { margin-right : 5px; }
			&:has(span:nth-of-type(3)) {
				position  : relative;
				display   : flex;
				flex-wrap : wrap;
				overflow  : hidden;
				span:nth-of-type(n + 3) { display : none; }
			}
		}
		.brewAuthors {
			.ellipsis();
			display            : -webkit-box;
			grid-area          : authors;
			align-content      : center;
			width              : 150px;
			height             : 40px;
			padding-right      : 5px;
			-webkit-line-clamp : 3;
			line-clamp         : 3;
			-webkit-box-orient : vertical;
			&:has(a:only-of-type) { width : fit-content; }
		}
		.lastViewed {
			grid-area : views;
			min-width : 50px;
		}
		.brewPages {
			grid-area : pages;
			min-width : 40px;
		}
		.lastUpdated {
			display     : flex;
			grid-area   : update;
			gap         : 5px;
			align-items : center;
		}
		.storage {
			grid-area : storage;
			filter    : drop-shadow(0 0 10px var(--text-shadow-clr));
			.homebreweryIcon {
				top    : 3px;
				left   : -5px;
				height : 20px;
			}
		}
	}
	.links {
		position        : relative;
		a, button {
			align-content : center;
			height        : 100%;
			text-align    : center;
		}
	}
}

//these media queries are just for the list layout and could be moved inside it, not sure it is a good idea
@media screen and (max-width : 1400px) {
	.brewCollection .brewGroup.list {
		.brewItem:not(.detailsOpen) {
			.info {
				grid-template-areas   : 'tags update storage';
				grid-template-columns : 2fr 1fr 20px;
				width                 : clamp(200px, 100%, 650px);
			}
			.brewPages,
			.lastViewed,
			.brewAuthors { display : none; }
		}
		.brewItem {
			cursor                : pointer;
			transition            : height @defaultDuration;
			&:hover {
				box-shadow : 0 0 5px var(--bg-clr);
				filter     : brightness(0.97);
			}
		}
		.detailsOpen {
			grid-template-columns : 25% 3fr 150px;
			height                : 70px;
		}
	}
}
@media screen and (max-width : 1200px) {
	.brewCollection .brewGroup.list {
		.brewItem:not(.detailsOpen) {
			grid-template-columns : 35% 3fr 150px;
			.info {
				grid-template-areas   : 'tags storage';
				grid-template-columns : 1fr 20px;
			}
			.brewAuthors,
			.lastUpdated { display : none; }
		}
		.detailsOpen {
			height : 100px;
			.info {
				grid-template-areas   : 'tags views pages .'
					'authors update update storage';
				grid-template-rows    : 1fr 1fr;
				grid-template-columns : 2fr 1fr 1fr 30px;
				width                 : clamp(200px, 100%, 650px);
			}
			.lastUpdated {
				.ellipsis();
				max-width     : 120px;
			}
		}
	}
}
@media screen and (max-width : 800px) {
	.brewCollection .brewGroup.list {
		.brewItem:not(.detailsOpen) {
			.info {
				grid-template-areas   : 'tags';
				grid-template-columns : 1fr;
				width                 : clamp(200px, 100%, 650px);
			}
			.storage { display : none; }
		}
		.brewItem { 
			h2 {
				width     : 200px;
				font-size : 1em;
			}
			transition : height @defaultDuration;
		}
		.detailsOpen {
			display               : grid;
			grid-template-columns : 1fr 4fr 30px;
			height                : 100px;
			padding               : 5px;
			.text {
				height  : 100%;
				padding : 0;
				h2 {
					display            : -webkit-box;
					height             : fit-content;
					overflow           : hidden;
					text-overflow      : ellipsis;
					-webkit-line-clamp : 3;
					line-clamp         : 3;
					white-space        : wrap;
					-webkit-box-orient : vertical;
				}
			}
			.info {
				display               : grid;
				grid-template-areas   : 
					'tags pages views views'
					'authors update update storage';
				grid-template-columns : 2fr 1fr 1fr 20px;
				width                 : 100%;
				height                : 100%;
			}
			.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 2fr;
			.info { display : none; }
		}
		.detailsOpen {
			.info {
				.lastUpdated {
					.ellipsis();
					width : 100px;
				}
			}
		}
	}
}