@use 'sass:math';

//You may ask why this prefix ? It will help you to white label you custom embeds using custom templates :)
$pf: wef-;

//Set the number of columns for the custom embeds grid
$max-cols: 12;

//Main Styles
.#{$pf}container {
	padding: 10px;
	line-height: 20px;
	font: {
		size: 14px;
		weight: 300;
		family: Helvetica, serif;
	}

	//ROW SYSTEM
	display: table;
	width: 100%;
	@media (min-width: 30em) {
		.#{$pf}row {
			width: 100%;
			display: table-row;
			table-layout: fixed;
			float: left;
		}

		@for $i from 1 through $max-cols {
			.#{$pf}col-#{$i} {
				width: math.div($i, $max-cols) * 100%;
				display: table-cell;
				float: left;
			}
		}
	}

	//Template Styles

	hr.#{$pf}hr {
		margin: {
			top: 10px !important;
			bottom: 10px !important;
			left: 0 !important;
			right: 0 !important;
		}
		float: left !important;
		border: {
			top: 1px;
			style: solid;
			color: #DEDEDE;
		}
		box-sizing: content-box;
		height: 0 !important;
		width: 100% !important;
	}

	img.#{$pf}icon {
		float: right;
		box-shadow: none;
		margin: 0;
		padding: 0;
		display: block;
	}

	img.#{$pf}thumbnail {
		border: 1px solid #808080;
		border-radius: 2px;
		height: 60px !important;
		margin: 2px 4px;
		padding: 0;
		width: 60px !important;
	}

	.#{$pf}album-thumbs {
		display: inline-block;
	}

	a.#{$pf}button {
		padding: 5px 9px !important;
		text-align: center;
		text-decoration: none !important;
		display: inline-block;
		font-size: 15px;
		-webkit-transition-duration: 0.1s;
		transition-duration: 0.1s;
		cursor: pointer;
		background-color: #fff;
		color: #000 !important;
		border: 2px solid #23487F !important;
		border-radius: 4px;

		&:hover, &:focus {
			background-color: #23487F !important;
			color: white !important;
			text-decoration: none !important;
		}
	}

	a {
		font: 300 14px / 20px Helvetica;
		color: #23487F !important;
		text-decoration: none !important;
		border: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		box-shadow: none !important;

		&:focus, &:hover {
			color: #23487F;
			text-decoration: underline !important;
		}

		&.#{$pf}post-likes {
			color: #6d84b4 !important;
			font-size: 12px !important;
		}

		&.road-trip {
			width: 0 !important;
			height: 0 !important;
		}

		img {
			display: inline-block !important;
			margin: 0 !important;
			padding: 0 !important;
			box-shadow: none !important;
		}
	}

	p {
		font: 300 14px / 20px Helvetica;
		padding: 0 !important;
		margin: 0 !important;

		&.#{$pf}post-time {
			font-style: italic;
			color: #8e8c8d;
			font-size: 12px;
		}

		&.caption-link {
			text-align: right;
			word-break: break-all;

			a {
				font-size: 12px;
				color: #8e8c8d !important;
				text-transform: uppercase;
			}
		}

		&.caption-title {
			text-align: left;

			a {
				font-size: 12px;
				font-weight: bold;
			}
		}
	}

	.caption-description p {
		color: #8e8c8d !important;
		font-style: italic !important;
		font-size: 12px !important;
	}

	iframe, embed, object, video, audio {
		width: 100% !important;
		border: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.#{$pf}post-link {
		border: {
			width: 1px;
			style: solid;
			color: #d0d0d0;
		}
		box-shadow: 1px 1px 2px #b3b3b3;

		p {
			padding: {
				left: 10px !important;
				right: 10px !important;
			}
		}
	}

	.#{$pf}text-center {
		text-align: center;
	}

	.#{$pf}text-right {
		text-align: right;
	}

	.#{$pf}pl-none {
		padding-left: 0 !important;
		word-break: break-all;
	}

	.#{$pf}title {
		font-size: 20px !important;
		font-weight: bold !important;
		word-break: break-all;
		display: inherit !important;
		height: 100% !important;
		background-color: transparent !important;
		padding-top: 5px !important;
	}

	.#{$pf}pad-top {
		padding: {
			top: 5px;
		}
	}

	.#{$pf}measure {
		width: 100%;
	}

	.#{$pf}event_address {
		color: #404040;
		font-style: italic;
	}

	.#{$pf}relative-container {
		position: relative;
		display: block;
		height: 0;
		overflow: hidden;

		.#{$pf}relative {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			height: 100%;
			width: 100%;
			border: 0;
			margin: 0;
			padding: 0;
		}
	}

	.#{$pf}video {
		padding: 0 0 56.25%;

		iframe, embed, object, video {
			@extend .#{$pf}relative;
		}
	}

	.#{$pf}fbpost-image {
		padding: 0 0 51%;

		div {
			cursor: pointer;
			background: {
				size: cover;
				position: 50% 50%;
			}
		}
	}

	.#{$pf}cover {
		padding: 0 0 36.86%;

		div {
			background-size: 100% !important;
			background-position-x: 0;
			cursor: pointer;
		}
	}

	.#{$pf}album-thumb {
		height: 65px !important;
		margin: 1px;
		padding: 2px;
		width: 65px !important;
		float: left;
		background-size: cover;
	}

	.#{$pf}hovereffect {
		width: 100%;
		height: 100%;
		float: left;
		overflow: hidden;
		position: relative;
		text-align: center;
		cursor: default;

		.overlay {
			width: 100%;
			height: 100%;
			position: absolute;
			overflow: hidden;
			top: 0;
			left: 0;
			-webkit-transition: all 0.4s ease-in-out;
			transition: all 0.4s ease-in-out;
		}

		a.info {
			display: inline-block;
			text-decoration: none;

			//padding: 7px 14px
			text-transform: uppercase !important;
			color: #fff !important;
			border: 1px solid #fff !important;
			margin: 50px 0 0 0;
			background-color: transparent;
			opacity: 0;
			filter: alpha(opacity=0);
			-ms-transform: scale(1.5);
			transform: scale(1.5);
			-webkit-transition: all 0.4s ease-in-out;
			transition: all 0.4s ease-in-out;
			font-weight: normal;
			height: 85%;
			width: 85%;
			position: absolute;

			//top: -20%
			left: 8%;
			padding: 70px;
		}

		&:hover {
			.overlay {
				background-color: rgba(170, 170, 170, 0.4) !important;
			}

			a.info {
				opacity: 1;
				filter: alpha(opacity=100);
				-ms-transform: scale(1);
				transform: scale(1);
				background-color: rgba(0, 0, 0, 0.4);
				top: 5%;
				padding-top: 5% !important;
			}
		}
	}
}

//Theme Styles
.#{$pf}default {
	background-color: #FFFFFF;
	border: {
		width: 1px;
		style: solid;
		color: #DEDEDE;
		radius: 2px;
	}
}

.#{$pf}classic {
	background-color: #FFFFFF;
	margin: 10px auto;
	border: {
		width: 1px;
		style: solid;
		color: #23487F;
		radius: 0;
	}
	box-shadow: 1px 1px 2px #23487F;
	color: #0f0f0f;
}

.#{$pf}elegant {
	margin: 10px auto;
	border: {
		width: 1px;
		style: solid;
		color: #f0f0f0;
		radius: 0;
	}
	width: 100%;
	background-color: #efefef;
}