@import '@sharedStyles/core.less';

.brewItem {
	position                    : relative;
	box-sizing                  : border-box;
	display                     : inline-block;
	width                       : 48%;
	min-height                  : 105px;
	padding                     : 5px 15px 2px 6px;
	padding-right               : 15px;
	margin-right                : 15px;
	margin-bottom               : 15px;
	overflow                    : hidden;
	vertical-align              : top;
	background-color            : #CAB2802E;
	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;
	.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;
		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;
		h4 {
			margin-bottom : 5px;
			font-size     : 2.2em;
		}
	}
	.info {
		position    : initial;
		bottom      : 2px;
		font-family : "ScalySansRemake";
		font-size   : 1.2em;
		& > 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 + 1) { 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;
	}
}
