@import "variables";
.widget {
	position: relative;
	&.widget-simple {
		.widget-head {
			margin-bottom: 16px;
			font-size: 14px;
			.title {
				strong {
					margin-right: 4px;
					font-size: 22px;
					@media (max-width: 767px){
						font-size: 18px;
					}
				}
				a {
					border-bottom-color: transparent;
					color: $gray;
					white-space: nowrap;
					&:hover {
						color: $blue;
					}
				}
			}
			.description {
				font-weight: bold;
				color: $gray;
				@media(max-width: 767px){
					padding-top: 8px;
				}
			}
		}
		.widget-body {}
	}

	&.widget-similar {
		position: relative;
		margin-left: -8px;
		margin-right: -8px;
		.widget-head {
			margin-bottom: 16px;
			padding-left: 8px;
			padding-right: 8px;
			font-size: 22px;
			font-weight: bold;
		}
		.widget-body {
			overflow-x: auto;
			@media (max-width: 991px){
				&:before {
					content: '';
					background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,1) 100%);
					background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 65%,rgba(255,255,255,1) 100%);
					background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 65%,rgba(255,255,255,1) 100%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );

					position: absolute; top: 0; bottom: 18px; right: 0;
					z-index: 555;
					width: 40px;
				}
			}
		}
		.widget-list {
			position: relative;
			margin: 0;
			padding: 0;
			list-style: none;
			white-space: nowrap;
			& > li {
				display: inline-block;
				vertical-align: top;
				white-space: normal;
				width: 14.2857%;
				padding-left: 8px;
				padding-right: 8px;
			}
			@media (max-width: 991px){
				& > li {
					width: 16.6666%;
					width: 18%;
				}
			}
			@media (max-width: 767px){
				& > li {
					width: 20%;
					width: 22%;
				}
			}
			@media (max-width: 575px){
				& > li {
					width: 33.3333%;
					width: 40%;
				}
			}
		}
		.widget-item {
			border: none;
			position: relative;
			display: block;
			.widget-item__image {}
			.widget-item__title {
				font-size: 12px;
				a {
					border-bottom-color: transparent;
				}
				&:not(:first-child){
					margin-top: 8px;
				}
			}
			.widget-item__price {
				padding-top: 4px;
				color: $color_dark;
				strong {
					color: $blue;
				}
			}
			.widget-item__discount {
				padding-top: 6px;
				font-size: 12px;
				s {
					background: $color_gray_10;
					display: inline-block;
					padding: 2px 4px;
					color: $color_gray_60;
				}
				i {
					display: inline-block;
					padding: 2px 4px;
					font-style: normal;
					&.warning {
						background: $yellow;
					}
					&.danger {
						background: $red;
						color: $white;
					}
				}
			}
			.widget-item__more {
				background: #F5F7FA;
				border: 1px solid #E9E9E9;
				@include transition();
				img {
					display: block;
					width: 100%;
				}
				strong {
					position: absolute; top: 50%; left: 4px; right: 4px;
					text-align: center;
					color: $blue;
					@include transform(translateY(-50%));
					@media (max-width: 991px){
						font-size: 14px;
					}
					@media (max-width: 767px){
						font-size: 13px;
					}
					span {
						display: block;
						font-size: 16px;
					}
				}
			}
			&:hover {
				.widget-item__title {
					text-decoration: underline;
				}
				.widget-item__more {
					background: lighten($blue, 60%);
					border: 1px solid lighten($blue, 40%);
				}
			}
		}
	}

	&.widget_discount {
		background: #FFEFC1;
		position: relative;
		overflow: hidden;
		min-height: 32px;
		color: #333;
		@media (min-width: 768px) {
			text-align: center;
		}
		.wd-discount {
			position: relative;
			display: inline-block;
			vertical-align: top;
			@media (max-width: 767px) {
				display: block;
				margin-right: 100px;
			}
			.wd-discount__base {
				background: #d70a31;
				background: -moz-linear-gradient(left, #d70a31 0%, #d70a31 45%, #ffb800 100%);
				background: -webkit-linear-gradient(left, #d70a31 0%,#d70a31 45%,#ffb800 100%);
				background: linear-gradient(to right, #d70a31 0%,#d70a31 45%,#ffb800 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d70a31', endColorstr='#ffb800',GradientType=1 );
				position: absolute; top: 0; right: 0; bottom: 0; left: 0;
				z-index: 1;
				@include transform(skewX(-20deg));
				@media (max-width: 767px) {
					left: -20px;
				}
			}
			.wd-discount__body {
				position: relative;
				overflow: hidden;
				z-index: 2;
				min-height: 32px;
				padding: 0 20px;
				font-size: 24px;
				font-weight: bold;
				color: $white;
				line-height: 28px;
				white-space: nowrap;
				strong {
					@media (max-width: 767px) {
						font-size: 20px;
					}
					@media (max-width: 359px) {
						font-size: 18px;
					}
				}
				span {
					@media (max-width: 767px) {
						font-size: 16px;
					}
					@media (max-width: 359px) {
						font-size: 15px;
					}
				}
				@media (max-width: 767px) {
					display: flex;
					padding: 0 4px 0 8px;
					align-items: center;
					white-space: normal;
					strong {
						margin-right: 8px;
					}
					span {
						flex-grow: 1;
						padding: 4px 0;
						line-height: 1;
					}
				}
			}
		}
		.wd-time {
			position: absolute; top: 50%; right: 12px;
			margin: -12px 0 0 0;
			padding: 0;
			list-style: none;
			@media (max-width: 991px) {
				right: 4px;
			}
			& > li {
				display: inline-block;
				vertical-align: top;
				line-height: 24px;
				&.wd-time__head {
					margin-right: 4px;
					@media (max-width: 991px) {
						display: none;
					}
				}
				&.wd-time__body {
					background: $red;
					width: 88px;
					font-size: 18px;
					font-weight: bold;
					line-height: 24px;
					color: $white;
					text-align: center;
					@include border-radius(3px);
				}
			}
		}
	}

	&.widget_discount_v2 {
		background: #ffc20e;
		position: relative;
		overflow: hidden;
		display: flex;
		.wd-discount {
			display: flex;
			flex-grow: 1;
			@media(min-width: 576px){
				justify-content: center;
			}
			.wd-discount__body {
				background: #d70a23;
				position: relative;
				display: flex;
				padding: 4px 12px;
				font-size: 24px;
				font-weight: 700;
				line-height: 1;
				color: #fff;
				@media(max-width: 991px){
					padding: 6px 12px;
					font-size: 20px;
				}
				@media(max-width: 767px){
					padding: 7px 12px;
					font-size: 18px;
				}
				@media(max-width: 359px){
					padding: 8px 12px;
					font-size: 16px;
				}
				&:before {
					content: '';
					background: #d70a23;
					position: absolute; top: 0; bottom: 0; left: -10px; right: -10px;
					@include transform(skewX(-20deg));
				}
				strong {
					position: relative; z-index: 2;
					padding-right: 4px;
				}
				span {position: relative; z-index: 2;}
			}
		}
		.wd-time {
			@media(min-width: 992px){
				position: absolute; top: 4px; right: 8px;
			}
			display: flex;
			align-items: center;
			margin: 0;
			padding: 0 4px;
			list-style: none;
			.wd-time__head {
				padding-right: 8px;
				@media(max-width: 767px){
					display: none;
				}
			}
			.wd-time__body {
				background: #d70a23;
				padding: 3px 4px;
				font-size: 18px;
				line-height: 1;
				font-weight: bold;
				color: #fff;
			}
		}
	}
}