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


// Variables
$thumbnail-bg: rgba( $secondary, .9 );
$thumbnail-color: $white;
$thumbnail-caption-fsz: $font-size-sm;


// Base
.thumbnail-connor {
	position: relative;
	display: inline-block;
	transition: $transition-base;
}

.thumbnail-connor-caption {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 15px;
	color: $thumbnail-color;
	text-align: center;
	pointer-events: none;
	background-color: $thumbnail-bg;
	transition: inherit;

	> * {
		pointer-events: auto;
	}
}

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

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


// Spacing
* + .thumbnail-connor-description { margin-top: 10px; }
* + .thumbnail-connor-btn { margin-top: 23px; }


// Media
@include media-breakpoint-up( lg ) {
	* + .thumbnail-connor-description { margin-top: 20px; }
	* + .thumbnail-connor-btn { margin-top: 33px; }

	.desktop {
		.thumbnail-connor-caption {
			opacity: 0;
		}

		.thumbnail-connor:hover {
			.thumbnail-connor-caption {
				top: 30px;
				left: 30px;
				opacity: 1;
			}
		}
	}
}