/*
 * Modules and Variables
 */

@import "partials/base"
@import "partials/entypo"

/*
 * GENERAL STYLES
 */

.slider_captcha
	font-family: Helvetica, Arial, sans-serif
	font-size: 16px
	font-weight: 400
	text-align: center
	color: #A3A3A3
	background: #eee
	display: table
	position: relative
	overflow: hidden
	width: 100%
	height: $slider-height
	padding: 0

	+rect-left-radius()
	+rect-right-radius()
	+text-not-selectable()

	span
		display: table-cell
		vertical-align: middle
		cursor: default
		position: relative


.swipe-knob 
	position: absolute
	top: 0
	left: 0

	width: $slider-height
	height: $slider-height

	background-color: #72D5EE
	color: #fff
	
	&:not(.type_filled)

		&[class*=" icon-"] > span:after
			display: none

		span
			display: table
			width: 100%
			height: 100%
			cursor: move

			&:before
				display: table-cell
				vertical-align: middle

			&:after
				font-family: 'entypo'
				display: table-cell
				vertical-align: middle
				font-size: 26px
				content: "\E766"
				cursor: move

		&.swipe_ended

			background-color: #868D8F
			right: 0
			cursor: auto

			span
				width: 100%
				height: 100%
				&[class*=" icon-"]:after
					display: none
				&:after
					content: "\2713"

	&.type_filled
		left: $slider-height
		margin-left: -100%
		width: 100%
		cursor: move

		+rect-radius()
		+text-not-selectable()

		&[class*=" icon-"]
			span
				position: absolute
				right: 19px
				top: 11px
				cursor: move

				&:after
					display: none

				&:before
					display: block
					vertical-align: none
	
		span
			position: absolute
			right: 19px
			top: 11px
			cursor: move
			&:after
				font-family: 'entypo'
				font-size: 26px
				content: "\E766"
			

		&.swipe_ended
			background-color: #868D8F
			right: 0
			cursor: auto

			span:after
				content: "\2713"


.knob-destiny
	position: absolute
	top: 0
	right: 0
	width: $slider-height
	height: $slider-height