// Color
$container-background-color: #222 !default;
$mask-color: #000 !default;
$mask-opacity: 0.7 !default;
$pager-label-color: #aaa !default;
$title-color: #eee !default;

// Font
$font-family: sans-serif !default;
$font-size: 1.0em !default;
$pager-label-font-size: 90% !default;

// Geometry
$title-height: 32px !default;
$close-button-spacing: 8px !default;
$close-button-intutive-offset: -8px !default;
$pager-button-width: 44px !default;
$pager-label-height: 22px !default;
$pager-label-spacing: 8px !default;

$close-button-size: $title-height !default;

// Image
$close-button-image-size: 32px !default;
$close-button-image-url: 'img/close0.png' !default;
$close-button-highlighted-image-url: 'img/close1.png' !default;

$prev-button-image-size: 32px !default;
$prev-button-image-url: 'img/prev0.png' !default;
$prev-button-highlighted-image-url: 'img/prev1.png' !default;

$next-button-image-size: 32px !default;
$next-button-image-url: 'img/next0.png' !default;
$next-button-highlighted-image-url: 'img/next1.png' !default;

$loading-image-size: 32px !default;
$loading-image-url: 'img/loading.gif' !default;

$error-image-size: 32px !default;
$error-image-url: 'img/error.png' !default;


// Mask
.#{$prefix}mask {
	background-color: rgba($mask-color, $mask-opacity);
}


// Frame
.#{$prefix}frame {
	padding-top: $title-height;
}


// Button
.#{$prefix}button {
	position: absolute;
}
.#{$prefix}button.#{$prefix}disabled {
	display: none;
}
.#{$prefix}close {
	@include background-images(
		$position: center center,
		$repeat: no-repeat,
		$size: $close-button-image-size,
		$url: $close-button-image-url
	);
	height: $close-button-size;
	right: 0 + $close-button-intutive-offset;
	top: 0;
	width: $close-button-size;
}
.#{$prefix}close:hover {
	@include background-images($close-button-highlighted-image-url);
}
.#{$prefix}prev,
.#{$prefix}next {
	$pager-button-offset: $title-height / 2;

	height: 100%;
	margin-top: $pager-button-offset;
	top: 0;
	width: $pager-button-width;
}
.#{$prefix}prev {
	@include background-images(
		$position: center center,
		$repeat: no-repeat,
		$size: $prev-button-image-size,
		$url: $prev-button-image-url
	);
	left: -$pager-button-width;
}
.#{$prefix}prev:active,
.#{$prefix}prev:hover {
	@include background-images($prev-button-highlighted-image-url);
}
.#{$prefix}next {
	@include background-images(
		$position: center center,
		$repeat: no-repeat,
		$size: $next-button-image-size,
		$url: $next-button-image-url
	);
	right: -$pager-button-width;
}
.#{$prefix}next:active,
.#{$prefix}next:hover {
	@include background-images($next-button-highlighted-image-url);
}


// Label
.#{$prefix}label {
	font-family: $font-family;
	font-size: $font-size;
	position: absolute;
}
.#{$prefix}title {
	@include box-sizing(border-box);

	color: $title-color;
	height: $title-height;
	left: 0;
	line-height: $title-height;
	overflow: hidden;
	text-align: left;
	text-overflow: ellipsis;
	top: 0;
	white-space: nowrap;
	width: 100%;

	.#{$prefix}close-button-enabled & {
		padding-right: $close-button-spacing
			+ $close-button-size
			+ $close-button-intutive-offset;
	}
}
.#{$prefix}pager {
	bottom: -($pager-label-spacing + $pager-label-height);
	color: $pager-label-color;
	font-size: $pager-label-font-size;
	height: $pager-label-height;
	left: 0;
	line-height: $pager-label-height;
	text-align: center;
	width: 100%;
}


// Container
.#{$prefix}container {
	background-color: $container-background-color;
	text-align: center;
}


// Content
.#{$prefix}loading {
	@include background-images(
		$position: center center,
		$repeat: no-repeat,
		$size: $loading-image-size,
		$url: $loading-image-url
	);
}
.#{$prefix}error {
	@include background-images(
		$position: center center,
		$repeat: no-repeat,
		$size: $error-image-size,
		$url: $error-image-url
	);
}

