// --------------------------------------------------------------------------------------------
// LABELS
// --------------------------------------------------------------------------------------------

.product-labels {
	position: absolute;
	display: flexbox;
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-align-items: flex-start;
	-ms-flex-align: flex-start;
	align-items: flex-start;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	z-index: 1;
	max-width: 50%;
}

.product-label {
	min-width: 50px;
	color: white;
	font-weight: bold;
	word-break: break-all;
	letter-spacing: 1px;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;

	&:not(:last-child) {
		margin-bottom: 10px;
	}

	&.onsale {
		background-color: $primary-color;
	}

	&.featured {
		background-color: #e22d2d;
	}

	&.new {
		background-color: #438e44;
	}

	&.out-of-stock {
		background-color: black;
	}

	&.attribute-label:not(.label-with-img) {
		background-color: rgba(255, 255, 255, 0.9);
		color: $heading-color;       
	}
}

.labels-rectangular {
	top: 15px;
	left: 0;
	
	.product-label {
		letter-spacing: 0.4px;
		font-size: 12px;
		padding: 5px 10px;
	}

	.label-with-img {
		max-width: 50px;
		padding:0;
	}
}

.labels-rounded {
	top: 5px;
	left: 5px;
	
	.product-label {
		display: flexbox;
		display: flex;
		display: -webkit-flex;
		display: -ms-flex;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		min-height: 50px;
		padding:5px 7px;
		font-size: 13px;
		border-radius: 35px;

		.browser-Internet & {
			height: 50px;
		}
	}

	.label-with-img {
		min-height: auto;
		max-width: 55px;
		padding:0;
	}

	.out-of-stock {
		max-width: 50px;
		font-size: 12px;
	}
}

// ------------------------------------------
//  MENU LABEL
// ------------------------------------------

.menu-label {
	position:absolute;
	opacity: 0;
	top:50%;
	right:-5px;
	padding:2px 4px;
	margin-top: -20px;
	color:white;
	line-height: 1.3;
	font-size:8px;
	font-family:$main-font;
	text-transform:uppercase;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	-ms-transform:translateY(-50%);

	-webkit-transition:opacity 0.3s ease-in-out;
	transition:opacity 0.3s ease-in-out;

	&:after {
		position: absolute;
		@include font-icon($icon-caret-right);
		z-index: -1;
		bottom: 5px;
		font-size: 16px;
		bottom: -9px;
		left: 3px;
	}
}

.menu-label-new {
	background-color:$primary-color;

	&:after {
		color: $primary-color;
	}
}

.menu-label-sale {
	background-color:#D41212;

	&:after {
		color: #D41212;
	}
}

.menu-label-hot {
	background-color:#EF7C0A;

	&:after {
		color: #EF7C0A;
	}
}

.document-ready {

	.menu-label {
		opacity: 1;
	}
}