/*
 * Copyright MADE/YOUR/DAY OG <mail@madeyourday.net>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */


@import "mixins"
@import "compass/css3/background-clip"
@import "compass/css3/border-radius"
@import "compass/css3/box-shadow"
@import "compass/css3/box-sizing"
@import "compass/css3/images"
@import "compass/css3/text-shadow"
@import "compass/css3/transition"
@import "compass/css3/transform"
@import "compass/css3/opacity"


/* ===========================================
 * Light Skin
 * ========================================

.rsts-skin-dark

	&.rsts-main
		position: relative
		margin: auto
		background: black
		+background-image(linear-gradient(top, #222 33%, black))
		background-image: linear-gradient(to bottom, #222 33%, black)
		padding: 8px
		border: 1px solid black
		+border-radius(3px)
		+box-shadow(0 0 3px rgba(black, 0.5), inset 0 3px 1px -2px rgba(white, 0.3), inset 3px 0 1px -2px rgba(white, 0.3), inset -3px 0 1px -2px rgba(white, 0.3))

	&.rsts-type-fade .rsts-slide
		background: #222

	.rsts-view
		background: #222

	.rsts-caption
		position: absolute
		top: 20px
		left: 20px
		padding: 5px 10px
		+border-radius(2px)
		color: white
		background-color: black
		background-color: rgba(black, 0.6)
		+opacity(0)
		+transform(translate(0, -20px))
		+transition(opacity .5s, transform .5s)
	.rsts-active .rsts-caption
		+opacity(1)
		+transform(translate(0, 0))

	.rsts-prev, .rsts-next,
	.rsts-thumbs-prev, .rsts-thumbs-next
		position: absolute
		top: 50%
		right: 20px
		width: 36px
		height: 36px
		overflow: hidden
		margin-top: -18px
		border: 1px solid #151618
		+border-radius(3px)
		outline: none
		line-height: 0
		text:
			align: center
			decoration: none
			indent: -9999px
		background-color: #151618
		+background-image(linear-gradient(top, #333, #151618))
		background-image: linear-gradient(to bottom, #333, #151618)
		+background-clip
		+opacity(0)
		+box-shadow(0 0 2px 1px rgba(black, 0.3), inset 0 2px 2px -2px rgba(white, 0.5), inset 2px 0 2px -2px rgba(white, 0.3), inset -2px 0 2px -2px rgba(white, 0.3))
		+single-transition(opacity, 0.2s, ease-in)
		&:after
			content: "\203a"
			position: absolute
			left: 8px
			top: 5px
			font: normal 24px/1 "Courier New", monospace
			text-indent: 0
			color: white
	.rsts-prev,
	.rsts-thumbs-prev
		right: auto
		left: 20px
		&:after
			content: "\2039"
			left: 12px
	&:hover
		.rsts-prev, .rsts-next,
		.rsts-thumbs-prev, .rsts-thumbs-next
			+opacity(0.5)
			&:hover
				+opacity(1)
				+transition-duration(0.05s)
			&:active
				+box-shadow(inset 0 0 2px 1px black)
	&.rsts-direction-y
		.rsts-prev, .rsts-next
			top: 15px
			left: 50%
			margin:
				top: 0
				left: -18px
			&:after
				content: "\25b2"
				position: absolute
				top: 12px
				left: 14px
				font-size: 11px
				color: white
		.rsts-next
			top: auto
			bottom: 10px
			&:after
				content: "\25bc"
				top: 13px

	.rsts-nav
		position: relative
		margin: 0 0 -8px
		text-align: center
		ul
			/* Forcing margin/padding, since '#content ul' is quite common */
			margin: 0 !important
			padding: 0 10px !important
			border-top: 1px solid black
			background-color: black
			+background-image(linear-gradient(left, black, #333 50%, black))
			background-image: linear-gradient(to right, black, #333 50%, black)
			+background-clip
			+box-shadow(0 2px 4px -1px rgba(black, 0.25))
		li
			display: inline

	.rsts-nav-numbers
		a
			display: inline-block
			min-width: 24px
			margin: 5px 2px
			padding: .3em .3em .2em
			+border-radius(2px)
			outline: none
			font-size: .75em
			color: black
			text-decoration: none
			background-color: #555
			+box-shadow(inset 0 3px 2px -1px rgba(black, 0.15), inset 0 0 2px rgba(black, 0.1))
			&:hover
				background-color: #999
				+background-image(linear-gradient(top, #979797, #555 77%))
				background-image: linear-gradient(to bottom, #979797, #555 77%)
				+box-shadow(0 0 3px 1px rgba(white, 0.1), 0 2px 2px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.5))
			&.active
				+text-shadow(0 0 1px white)
				background-color: #ced0d7
				+background-image(linear-gradient(top, white, #ced0d7 77%))
				background-image: linear-gradient(to bottom, white, #ced0d7 77%)
				+box-shadow(0 0 3px 1px rgba(white, 0.3), 0 2px 2px rgba(black, 0.1), inset 0 3px 1px -1px rgba(white, 0.7), inset 0 -1px 1px rgba(white, 0.8))

	.rsts-nav-tabs
		ul
			+background-image(linear-gradient(left, black, #444 25%, #555 50%, #444 75%, black))
			background-image: linear-gradient(to right, black, #444 25%, #555 50%, #444 75%, black)
		a
			display: inline-block
			margin: -1px 0 0 -1px
			padding: 10px 12px
			border: 1px solid #222
			outline: none
			font-size: 0.75em
			color: white
			text-decoration: none
			background-color: #333
			+background-image(linear-gradient(top, #444, #222 77%))
			background-image: linear-gradient(to bottom, #444, #222 77%)
			+box-shadow(inset 0 -2px 0 -1px rgba(black, 0.5), inset 0 0 0 1px rgba(white, 0.1), 0 0 2px rgba(black, 0.3))
			&.active
				color: #aaa
				background-color: black
				+background-image(linear-gradient(top, black, #333 77%))
				background-image: linear-gradient(to bottom, black, #333 77%)
				+box-shadow(inset 0 0 4px rgba(black, 0.8), inset 0 -2px 0 -1px rgba(black, 0.5), inset 0 0 0 1px rgba(white, 0.1), 0 0 2px rgba(black, 0.3))

	.rsts-nav-bullets
		line-height: 0
		a
			display: inline-block
			margin: 8px 4px
			width: 20px
			height: 8px
			outline: none
			overflow: hidden
			text-indent: -999px
			background-color: #555
			+background-clip
			+box-shadow(inset 0 1px 2px -1px black, inset 0 0 2px rgba(black,.1))
			&:hover
				background-color: #999
				+box-shadow(0 0 5px 2px rgba(white, 0.2), inset 0 0 1px 1px rgba(black, 0.2))
			&.active
				background-color: #e4e4e4
				+box-shadow(0 0 5px 2px rgba(white,.4), inset 0 0 1px 1px rgba(white,.8))

	.rsts-nav-thumbs
		padding: 8px 0

	.rsts-nav
		.rsts-nav-prev, .rsts-nav-next
			display: none

	.rsts-video-play, .rsts-video-stop
		position: absolute
		top: 50%
		left: 50%
		width: 64px
		height: 64px
		overflow: hidden
		margin: -32px 0 0 -32px
		border: 1px solid black
		outline: none
		background-color: #151618
		background-color: rgba(white, .8)
		+background-image(linear-gradient(top, #333 0%, #151618))
		background-image: linear-gradient(to bottom, #333 0%, #151618)
		+border-radius(5px)
		+box-shadow(0 0 2px 1px rgba(black, 0.3), inset 0 2px 2px -2px rgba(white, 0.5), inset 2px 0 2px -2px rgba(white, 0.2), inset -2px 0 2px -2px rgba(white, 0.2))
		+opacity(0.9)
		text:
			indent: -999px
			decoration: none
		&:before
			content: "\25ba"
			position: absolute
			top: 10px
			left: 15px
			font-size: 36px
			color: white
			text-indent: 0
	.rsts-video-play
		&:hover, &:focus
			+box-shadow(0 0 3px 2px rgba(black, 0.3), inset 0 2px 2px -2px rgba(white, 0.5), inset 2px 0 2px -2px rgba(white, 0.2), inset -2px 0 2px -2px rgba(white, 0.2))
			+opacity(1)
			+transition-duration(0.05s)
		&:active
			+box-shadow(inset 0 0 2px 1px black)
	.rsts-video-stop
		top: 20px
		left: auto
		right: 11px
		width: 32px
		height: 32px
		margin: 0
		border: 0
		+border-radius(3px)
		background-color: black
		background-color: rgba(black, 0.8)
		+box-shadow(none)
		&:before
			content: "\d7"
			top: 8px
			left: 8px
			width: 16px
			height: 16px
			border: 0
			color: white
			font:
				size: 23px
				weight: bold
			line-height: 18px
			text:
				align: center
				indent: 0
		&:hover
			background: white
			+opacity(0.7)
			&:before
				color: black
	.rsts-video-youtube > .rsts-video-stop
		top: 25px
	.rsts-video-vimeo > .rsts-video-stop
		top: 10px
		right: auto
		left: 10px

	.rsts-progress
		position: absolute
		right: 0
		top: -5px
		width: 100%
		height: 11px
		overflow: hidden
		padding-top: 5px
		+opacity(0)
		+transition(opacity 0.2s linear)
		&:after
			content: ""
			position: absolute
			top: 5px
			left: 0
			width: 100%
			height: 1px
			background-color: white
			background-color: rgba(white, 0.5)
		div
			position: relative
			height: 1px
			background-color: #4683c2
			+background-image(linear-gradient(left, rgba(#9394ba, 0), #3cc8d9))
			background-image: linear-gradient(to right, rgba(#9394ba, 0), #3cc8d9)
			+box-shadow(0 -2px 2px -1px rgba(#3792ce, 0.9), 0 2px 2px -1px rgba(#3792ce, 0.9))
			&:after, &:before
				content: ""
				position: absolute
				right: 0
				top: -1px
				width: 3px
				height: 3px
				+border-radius(5px)
				background-color: white
				background-color: rgba(white, 0.9)
				+box-shadow(0 0 3px 1px rgba(white, 0.5))
			&:before
				width: 50px
				background-color: transparent
				+background-image(linear-gradient(left, rgba(white, 0), rgba(white, 1)))
				background-image: linear-gradient(to right, rgba(white, 0), rgba(white, 1))
				+box-shadow(0 0 3px -1px rgba(white, 0.5))
		&.rsts-progress-active
			+opacity(0.8)

	.rsts-overlay-prev,
	.rsts-overlay-next,
	.rsts-thumbs-overlay-prev,
	.rsts-thumbs-overlay-next
		position: absolute
		top: 0
		left: -1px
		width: 100%
		height: 100%
		+background(linear-gradient(90deg, #222, transparent))
		pointer-events: none
	.rsts-overlay-next,
	.rsts-thumbs-overlay-next
		left: auto
		right: -1px
		+background(linear-gradient(90deg, transparent, #222))
	.rsts-thumbs-overlay-prev
		+background(linear-gradient(90deg, black, transparent))
	.rsts-thumbs-overlay-next
		+background(linear-gradient(90deg, transparent, black))
	&.rsts-direction-y
		.rsts-overlay-prev
			left: 0
			top: -1px
			+background(linear-gradient(#222, transparent))
		.rsts-overlay-next
			top: auto
			right: 0
			bottom: -1px
			+background(linear-gradient(transparent, #222))

	.rsts-thumbs-slide
		+opacity(0.6)
		&.rsts-thumbs-active-thumb
			+opacity(1)