/*!
  ImageLinks - jQuery Interactive Image
  @name imagelinks.theme.dots.css
  @description A jQuery plugin for creating an interactive image for news, posters, albums and etc
  @version 1.4.0
  @author Max Lawrence 
  @site http://www.avirtum.com
  @copyright (c) 2016 Max Lawrence (http://www.avirtum.com)
*/

//===========================================
// Variables
//===========================================
@font-family-base:sans-serif;
@line-height-base:1.2;
@color-hotspot-inner:#fb5302;
@color-hotspot-border:#fff;
@color-popover-text:#fff;
@color-popover-bg:rgba(0,0,0,.8);
@color-popover-border:rgba(0,0,0,.9);

//===========================================
// Mixins
//===========================================
.imgl-shadow(@string) {
	-webkit-box-shadow:@string;
	box-shadow:@string;
}
.imgl-transition(@string) {
	-webkit-transition:@string;
	transition:@string;
}
.imgl-box-shadow(@string) {
	-webkit-box-shadow: @string;
	box-shadow: @string;
}
.imgl-transform(@string) {
	-webkit-transform: @string;
	transform: @string;
}
.imgl-keyframes(@name; @arguments) {
	@-webkit-keyframes @name { @arguments(); }
	@keyframes @name { @arguments(); }
}
.imgl-animation(@string) {
	-webkit-animation: @string;
	animation: @string;
}
.imgl-hidden() {
	opacity:0;
	visibility:hidden;
}
.imgl-visible() {
	opacity:1;
	visibility:visible;
}
.imgl-reset-text() {
	font-family:@font-family-base;
	// We deliberately do NOT reset font-size.
	font-style:normal;
	font-weight:normal;
	letter-spacing:normal;
	line-height:@line-height-base;
	line-break:auto;
	text-align:left; // Fallback for where `start` is not supported
	text-align:start;
	text-decoration:none;
	text-shadow:none;
	text-transform:none;
	white-space:normal;
	word-break:normal;
	word-spacing:normal;
	word-wrap:normal;
}
.imgl-box-sizing(@string) {
	-webkit-box-sizing:@string;
	-moz-box-sizing:@string;
	box-sizing:@string;
}
//===========================================
// ImageLinks General Styles
//===========================================
.imgl-view.imgl-theme-dots {
	.imgl-hotspots {
		.imgl-hotspot {
			.imgl-animation(imagelinks-hotspot-dots 2s infinite ease-out;);
			.imgl-box-sizing(content-box);
			width:12px;
			height:12px;
			background:@color-hotspot-inner;
			border:3px solid @color-hotspot-border;
			border-radius:50%;
		}
	}
		
	.imgl-popover {
		.imgl-reset-text(); // Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element. So reset our font and text properties to avoid inheriting weird values.
		color:@color-popover-text;
		background-color:@color-popover-bg;
		border:1px solid @color-popover-border;
		font-size:14px;
		
		// Offset the popover to account for the popover arrow
		&.imgl-popover-top    { margin-top : -10px; }
		&.imgl-popover-right  { margin-left:  10px; }
		&.imgl-popover-bottom { margin-top :  10px; }
		&.imgl-popover-left   { margin-left: -10px; }
		&.imgl-popover-top-right    { margin-top :  12px; margin-left: -12px; }
		&.imgl-popover-top-left     { margin-top :  12px; margin-left:  12px; }
		&.imgl-popover-bottom-right { margin-top : -12px; margin-left: -12px; }
		&.imgl-popover-bottom-left  { margin-top : -12px; margin-left:  12px; }
		
		&.imgl-close .imgl-close {
			.imgl-transition(opacity 0.3s);
			position:absolute;
			right:0px;
			top:0px;
			width:16px;
			height:16px;
			background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPjxwYXRoIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIzIiBkPSJNMy4yNjEsMy4yNjJsOS40NzgsOS40NzcgTTEyLjczOCwzLjI2MmwtOS40NzgsOS40NzciLz48L3N2Zz4=);
			cursor:pointer;
			opacity:0.4;
			
			&:hover {
				opacity:0.8;
			}
		}
			
		.imgl-content {
			padding:20px;
		}
	
		&.imgl-close .imgl-content {
			padding:20px;
		}
	}
}
.imgl-keyframes(imagelinks-hotspot-dots; {
	0%   { .imgl-shadow(0 0 1px 0 rgba(0,0,0,0.8)) }
	100% { .imgl-shadow(0 0 1px 5px rgba(0,0,0,0)) }
});