@import "../bootstrap/scss/functions";
@import "../base/functions";
@import "../base/variables";
@import "../bootstrap/scss/variables";
@import "../bootstrap/scss/mixins";
@import "../base/mixins";


// Variables
$thumbnail-bg: $gray-800;
$thumbnail-color: $white;
$thumbnail-caption-fsz: $font-size-sm;


// Base
.thumbnail-frode {
	position: relative;
	display: inline-block;
	max-width: 400px;
	text-align: left;
	transition: $transition-base;
}

.thumbnail-frode-caption {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	padding: 15px;
	color: $thumbnail-color;
	background-color: rgba( $thumbnail-bg, .8 );
}

.thumbnail-frode-title {
	color: inherit;
}

.thumbnail-frode-description {
	font-size: $thumbnail-caption-fsz;
}

.thumbnail-frode-btn {
	align-self: flex-end;
}


// Spacing
* + .thumbnail-frode-btn { margin-top: px-to-rem( 15px ); }

// Media
@include media-breakpoint-up(sm) {
	.thumbnail-frode {
		max-width: 100%;
	}
}
@include media-breakpoint-up( lg ) {
	.thumbnail-frode-content {
		width: 100%;
		overflow: hidden;
	}

	.thumbnail-frode-title,
	.thumbnail-frode-description {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.desktop {
		.thumbnail-frode {
			img {
				position: relative;
				z-index: 1;
				transform: scale( 1 );
				transition: transform .4s;
			}
		}

		.thumbnail-frode-caption {
			background-color: $thumbnail-bg;
			transform: scale( .4 );
			transition: transform .4s, opacity .4s;
		}

		.thumbnail-frode:hover {
			img {
				transform: scale( .4 );
			}

			.thumbnail-frode-caption {
				transform: scale( 1 );
			}
		}
	}
}

@include media-breakpoint-up( xl ) {
	.thumbnail-frode-caption {
		padding: 32px 40px 40px;
	}

	* + .thumbnail-frode-description { margin-top: 11px; }
}