@import "/templates/definitions";

.article {
	&__inner {
		background:#fff;
		flex:1;
		min-width:0;
		margin-bottom:1rem;
		&:hover {
			.article__overlay {
				opacity:1;
			}
		}
	}
	&__imagewrapper {
		display:block;
		position:relative;
		margin-bottom:1rem;
		> a {
			display:block;
		}
	}
	
	&__image {
		display:block;
		width:100%;
	}
	
	&__overlay {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background:fade(#000,20%);
		pointer-events:none;
		opacity:0;
		.smooth();
	}
	
	&__sticker {
		position: absolute;
		top: 0;
		right: 0;
		pointer-events: none;
		padding: 5px 10px;
		font-weight: @font-weight-bold;
		font-size: 1.2rem;
		&--percent {
			background: red;
			color: white;
		}
	}
	
	&__taskIcon {
		position: absolute;
		bottom: 10px;
		right:10px;
		padding: 16px;
		background-color: rgba(255,255,255,0.5);
		background-image: url(/assets/icons/icon_delete.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-size:50%;
		border-radius: 50%;
		&:hover {
			background-color:#fff;
		}
	}
	&__main {
		display:block;
		text-align:center;
	}
	&__title {
		font-size:1rem;
		margin-bottom:0.4em;
		color:@color-primary;
		word-wrap: break-word;
	}
	&__price {
		> span {
			text-decoration:line-through;
			white-space:nowrap;
			color:@color-tertiary;
			font-weight: @font-weight-normal;
			&:first-child {
				text-decoration:none;
				color:@color-font;
				font-weight: @font-weight-bold;
			}
		}
	}
}