/* Essential Grid styles
----------------------------------------------------------------- */

@import "../../../../css/_mixins.scss";
@import "../../../../css/_theme-vars.scss";
@import "../../css/_skin-vars.scss";

.esg-grid i[class*="eg-icon-"] {
	color: #fff;
	@include transition-color(.5s);
}
.esg-grid a:hover i[class*="eg-icon-"] {
	color: #fff;
}
.esg-navigationbutton i[class*="eg-icon-"] {
	color: #888;
}
.esg-navigationbutton:hover i[class*="eg-icon-"] {
	color: #333;
}

.esg-entry-cover .eec > div {
	margin-right: 0 !important;
}

.esg-entry-cover .eec > div[class*="-element-1-a"] {
	margin-left: 10px !important;
}

.esg-starring {
	vertical-align: top;
}
.esg-starring .star-rating, .esg-starring-page .star-rating {
	width: 6em;
}

.flat-light .esg-filters .esg-sortbutton-order,
.flat-light .esg-filters .esg-cartbutton-order {
	line-height:36px;
	margin:0;
}
.flat-light .esg-filters .esg-sortbutton {
	padding-right: 0;
}

.esgbox-overlay {
	z-index: 228010 !important;
}
.esgbox-opened {
	z-index: 228030 !important;
}

.wp-widget-ess-grid-widget ul > li:before {
	display: none !important;
}

/* ESG box */
.esgbox-close-small {
	&:after {
		border: none;
	}
	&:hover {
		&:after {
			background-color: transparent !important;
			border: none;
		}
	}
}
.esgbox-share {
	a {
		color: #ffffff !important;
	}
}
.esg-container {
	ul {
		li {
			&:before {
				display: none !important;
			}
		}
	}
}
.esgbox-container {
	.esgbox-toolbar {
		.esgbox-button {
			&--fullscreen {
				display: none;
			}
		}
	}
	&.esgbox-can-drag {
		.esgbox-toolbar {
			.esgbox-button--thumbs {
				+ .esgbox-button--share {
					display: none;
				}
			}
		}
	}
}

.esgbox-container {
	.esgbox-button, button.esgbox-button:not(.toggle) {
		color: var(--theme-color-inverse_link) !important;
		background-color: var(--theme-color-text_link) !important;
		@include transition(color .3s ease, background-color .3s ease !important);
		&:hover {
			background-color: var(--theme-color-text_hover) !important;
		}
	}
	.esgbox-share {
		@include border-radius(0);
		background: var(--theme-color-alter_bg_color);
		h1 {
			font-weight: 400;
			letter-spacing: 1px;
			color: var(--theme-color-alter_dark);
		}
		.esgbox-button.esgbox-close-small {
			color: var(--theme-color-alter_dark) !important;
			background-color: transparent !important;
			opacity: 1;
			@include transition(opacity .3s ease);
			svg path {
				fill: var(--theme-color-alter_dark) !important;
			}
			&:hover {
				color: var(--theme-color-alter_dark) !important;
				background-color: transparent !important;
				opacity: .9;
			}
		}
	}
	.esgbox-share__button {
		@include border-radius(0);
		margin: 0 10px 0 0;
		&:last-child {
			margin-right: 0;
		}
	}
}