/*

########################
### MOLECULE: teaser ###
########################

### INFO:

The teaser molecule is a collection of mixins that could be included in specific
teaser types. (Success Stories, Templates, Guides and Tutorials, Examples, ...)

*/

@import '../../extends';
@import '../../functions';
@import '../../mixins';
@import '../../variables';

@import '../atoms/_color.scss';
@import '../atoms/_headline.scss';
@import '../atoms/_text.scss';
@import '../atoms/_icon.scss';

@mixin teaser {
	position: relative;
	margin: 0 20px 2em 0;
	flex: 1 0 15em;

	@media (min-width: 575px) {
		margin: 0 0 2em;
	}
}

@mixin teaser-linking {
	position: relative;
	display: block;
	transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@mixin teaser-linking-hover {
	transform: translateY(-2px);
}

@mixin teaser-tag {
	position: absolute;
	right: 16px;
	top: -15px;
	z-index: 1;
  border-radius: 15px;
	font-family: 'Poppins',  system;
}

@mixin teaser-tag-zero {
	position: absolute;
	right: 0;
	top: 0;
	font-size: 0;
	z-index: 1;
}

@mixin teaser-card {
	overflow: hidden;
	position: relative;
	background-color: white;
	border-radius: 10px;
	box-shadow: inset 0 0 0 1px color('athens-gray'), 0 15px 30px 0px rgba(0, 0, 0, 0.15);
	transition: box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@mixin teaser-card-hover {
	box-shadow: inset 0 0 0 1px color('athens-gray'), 0 25px 60px 0px rgba(0, 0, 0, 0.1);
}

@mixin teaser-header {
	display: flex;
	align-items: center;
	height: 50px;
	padding: 0 1.25em;
	@include gradient-dark;
}

@mixin teaser-header-title {
	@include txt;
	@include txt-hl;
	@include txt-1;
	@include txt-strong;
	@include txt-mono;
	@include color-white;
	margin: 0;
}

@mixin teaser-header-icon {
	@include ico-3;
	@include ico-white;
}

@mixin teaser-content {
	padding: 25px;
}

@mixin teaser-image {
	position: relative;

	&:before {
		content: '';
		position: absolute;
		left: -1px;
		bottom: 0;
		width: calc(100% + 2px);
		height: 150px;
		background: linear-gradient(0deg, rgba(0,0,0,0.12), rgba(0,0,0,0));
		z-index: 1;
	}
}

@mixin teaser-headline {
	@include hl;
	@include hl-h5;
	margin: 0;
}

@mixin teaser-copy {
	@include txt;
	@include txt-3;
	line-height: 1.6em;
	margin: 0;
}

@mixin video-length {
	width: 67px;
	height: 24px;
	margin-top: 30px;
	display: flex;
	align-items: center;
	@include txt;
	@include txt-3;
	@include txt-strong;
	@include color-blue-ribbon;
	border: 1px solid color('blue-ribbon');
	border-radius: 12px;

	&-text {
		margin-left: auto;
		margin-right: 15px;
	}

	&-icon {
		width: 12px;
		height: 12px;
		margin-left: 11px;
		margin-right: 5px;
		fill: color('blue-ribbon');
	}
}
