// Variables

$nav_width: 25px;
$nav_height: 33px;
$ui_controls_width: 25px;
$ui_controls_height: 25px;

// Fonts

@import "fonts";

// Placeholders

%hide-text {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

#slb_viewer_wrap {
	.slb_theme_slb_default {
		//General
		a,
		a:hover {
			border-bottom:none;
			color:#000;
			text-decoration:underline;
		}

		.slb_viewer_layout {
			top: 20px;
		}

		.slb_container {
			box-shadow: 0 0 64px -40px #fcfcfc;
			border-radius: 5px;
		}

		.slb_loading {
			@extend %hide-text;
		}

		.slb_template_tag_ui {
			transition: opacity .5s;
		}

		//UI
		.slb_controls {
			position: absolute;
			top: 8px;
			right: 8px;
			width: 75%;
			text-align: right;
			[dir="rtl"] & {
				right: inherit;
				left: 0px;
			}

			.slb_template_tag_ui {
				@extend %hide-text;
				width: $ui_controls_width;
				height: $ui_controls_height;
				float: right;
				margin-left: 2px;
				opacity: 0.5;
				[dir="rtl"] & {
					float: left;
				}
			}

			.slb_template_tag_ui:hover {
				opacity: 0.8;
			}

			.slb_slideshow .slb_template_tag {
				background: url('../images/ui_slideshow_play.png') 0 0 no-repeat;
			}

			.slb_close .slb_template_tag {
				background: url('../images/ui_close.png') 0 0 no-repeat;
			}
		}

		&.slideshow_active .slb_controls .slb_slideshow .slb_template_tag {
			background: url('../images/ui_slideshow_pause.png') 0 0 no-repeat;
		}

		//Navigation
		$ui_nav_pos: 45%;
		%ui_nav {
			@extend %hide-text;
			position: absolute;
			top: 20%;
			height: 71%;
			width: 45%;
			min-width: $nav_width;
			min-height: $nav_height;
			background-repeat: no-repeat;
			opacity: 0.5;
		}

		//Content
		.slb_content {
			min-height: $nav_height + $ui_controls_height;
			min-width: $nav_width * 2;

			.slb_prev .slb_template_tag,
			[dir="rtl"] & .slb_next .slb_template_tag {
				left: 4px;
				right: inherit;
				background-image: url('../images/nav_prev.png');
				background-position: left $ui_nav_pos;
			}

			.slb_next .slb_template_tag,
			[dir="rtl"] & .slb_prev .slb_template_tag {
				right: 4px;
				left: inherit;
				background-image: url('../images/nav_next.png');
				background-position: right $ui_nav_pos;
			}

			.slb_prev, .slb_next {
				.slb_template_tag {
					@extend %ui_nav;
					&:hover {
						opacity: 1
					}
				}
			}
		}

		.slb_details {
			line-height: 1.4em;
			overflow: hidden;
			position: relative;

			.slb_data {
				caption-side: bottom;
			}

			.slb_nav {
				display: none;
			}
		}

		//Title
		$title-size: 23px;

		.slb_data_title, .slb_group_status {
			font-family: 'Yanone Kaffeesatz', arial, sans-serif;
			font-size: $title-size;
			margin-right: .2em;
			display: inline-block;
			[dir="rtl"] & {
				margin-left: .2em;
				margin-right: 0px;
			}
		}

		.slb_group_status {
			color: #777;
			font-style: italic;
			font-size: $title-size * .8;
		}

		.slb_data_desc {
			display: block;
			margin-top: 0.5em;
		}

		//Media

		//Small screen
		@media screen and (max-width: 480px) {
			.slb_container {
				box-shadow: none;
				border-radius: 0;
			}
			.slb_controls {
				top: 3px;
				right: 3px;
			}

			%ui_nav {
				top: 17%;
				height: 79%;
			}
		}
	}
}