@import "variables";

//@media (min-width: 768px){}
//@media (max-width: 767px){}
.supergroup {
	&.supergroup_single {}
	&.supergroup_group {}
}


.supergroup {
	@media (min-width: 768px){
		background: #f2f2f2;;
		margin-bottom: 20px;
		padding: 12px 16px 0;
	}
	@media (max-width: 767px){
		margin-bottom: 24px;
	}
	.supergroup__head {
		margin-bottom: 12px;
		@media(max-width: 767px){
			margin-bottom: 8px;
		}
		.image {
			display: none;
		}
		.title {
			margin: 0;
			padding: 0;
			font-size: 28px;
			font-weight: bold;
			@media (max-width: 991px){
				font-size: 24px;
			}
			@media (max-width: 767px){
				font-size: 18px;
			}
		}
		.arrow {
			display: none;
		}
	}
	.supergroup__body {}
	.supergroup__list {
		position: relative;
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 0;
		@media (min-width: 768px){
			margin-left: -6px;
			margin-right: -6px;
			display: table;
			width: 100%;
		}
		& > li {
			font-size: 14px;
			@media (min-width: 768px){
				display: inline-block;
				vertical-align: top;
				width: 20%;
				padding: 0 6px 20px;
				zoom: 1;
			}
			@media (max-width: 1199px){
				width: 25%;
			}
			@media (max-width: 991px){
				width: 33.3333%;
			}
			@media (max-width: 767px){
				width: auto;
				&:not(:first-child){
					border-top: 1px solid $color_gray_05;
				}
				&:nth-of-type(n+4):not(.more){
					display: none;
				}
			}
			&.more {
				padding: 8px 0 0 52px;
				font-size: 12px;
				@media (min-width: 768px){
					display: none;
				}
				a {
					border: 0;
				}
			}
		}
	}
	.product-preview {
		position: relative;
		.product-preview__head {
			border: 0;
			padding: 0;
			.img-aligner {
				.img-aligner__bg {}
				.img-aligner__img {}
			}
		}
		.product-preview__body {
			.name {
				em {}
			}
		}
		@media(max-width: 767px){
			display: flex;
			align-items: center;
			.product-preview__marks {
				position: absolute; top: 50%; right: 0;
				margin-top: -10px;
				.discount, .label {
					padding: 2px 4px;
					font-size: 11px;
					line-height: 16px;
					&:before {
						display: none;
					}
					span {
						display: none;
					}
				}
			}
			.product-preview__head {
				position: static;
				min-width: 40px;
				@include box-shadow(none !important);
			}
			.product-preview__body {
				padding-left: 12px;
				padding-right: 40px;
				.name {
					padding-top: 0;
					text-align: left;
				}
			}
		}
	}

	&.view-all {
		.supergroup__list {
			& > li {
				@media (max-width: 767px){
					&:nth-of-type(n+4):not(.more){
						display: block;
					}
					&.more {
						display: none;
					}
				}
			}
		}
	}

	&.supergroup_warning {
		@media (min-width: 768px){
			background: #ffefc1;
		}
	}
}

.box-supergroup {
	.box-supergroup__head {
		margin-bottom: 8px;
		@media(min-width: 768px){
			display: none;
		}
		.title {
			margin: 0;
			padding: 0;
			font-size: 28px;
			font-weight: bold;
			@media (max-width: 991px){
				font-size: 24px;
			}
			@media (max-width: 767px){
				font-size: 18px;
			}
		}
	}
	.box-supergroup__body {
		margin: 0;
		padding: 0;
		list-style: none;
		& > li {
			position: relative;
			&:not(:first-child){
				&:before {
					content: '';
					background: $color_gray_05;
					position: absolute; top: 0; left: 0; right: 0;
					display: block;
					height: 1px;
				}
			}
		}
	}
	.supergroup {
		@media(max-width: 767px){
			margin: 0;
		}
		.supergroup__head {
			@media(max-width: 767px){
				position: relative;
				margin: 0;
				padding: 10px 0 10px 52px;
				.image {
					background-repeat: no-repeat;
					background-position: 50% 50%;
					background-size: cover;
					position: absolute; top: 50%; left: 0;
					overflow: hidden;
					display: block;
					width: 40px;
					@include transform(translateY(-50%));
					.bg {
						display: block;
						width: 100%;
					}
					.img {
						position: absolute; top: 50%; left: 50%;
						display: block;
						max-width: 100%;
						max-height: 100%;
						@include transform(translateX(-50%) translateY(-50%));
					}
				}
				.title {
					font-size: 14px;
				}
				.arrow {
					position: absolute; top: 50%; right: 0;
					display: block;
					height: 16px;
					line-height: 16px;
					margin-top: -8px;
				}

				&:hover {
					//background: $color_gray_03;
					cursor: pointer;
				}
			}
		}
		.supergroup__body {
			@media(max-width: 767px){
				display: none;
				.supergroup__list {
					margin-left: 16px;
					margin-bottom: 16px;
					& > li {
						border: 0;
						display: block;
						&:not(:first-child){
							margin-top: 4px;
						}
						&.more {
							display: none;
						}
					}
					.product-preview {
						.product-preview__head {
							min-width: 24px;
						}
						.product-preview__body {
							.name {
								font-weight: normal;
							}
						}
					}
				}
			}
		}
		&.in, &.shown {
			.supergroup__head {
				.arrow {
					@include transform(rotate(180deg));
				}
			}
			.supergroup__body {
				display: block;
			}
		}
	}
}