////////////////////////////////////////////////////////////////////////////////
//
//  Licensed to the Apache Software Foundation (ASF) under one or more
//  contributor license agreements.  See the NOTICE file distributed with
//  this work for additional information regarding copyright ownership.
//  The ASF licenses this file to You under the Apache License, Version 2.0
//  (the "License"); you may not use this file except in compliance with
//  the License.  You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
//  Unless required by applicable law or agreed to in writing, software
//  distributed under the License is distributed on an "AS IS" BASIS,
//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//  See the License for the specific language governing permissions and
//  limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////

// Jewel Slider

// Slider variables
$slider-margin: 20px
$slider-padding: 0
$slider-min-width: calc(100% - #{2 * $slider-margin})
$slider-track-min-height: 6px
$slider-thumb-size: 18px
$slider-container-height: #{$slider-thumb-size + round($slider-thumb-size/2)}

.jewel.slider
	position: relative
	height: $slider-container-height

	display: flex !important
	flex-direction: row

	background: none

	// -- INPUT
	input
		+appear(none)
		outline: 0

		cursor: pointer
		user-select: none

		align-self: center
		z-index: 1

		margin: 0 $slider-margin
		padding: $slider-padding

		width: $slider-min-width
		height: $slider-thumb-size * 2 //needed for IE11

		background: transparent

		// -- TRACK
		&::-webkit-slider-runnable-track
			background: transparent

		&::-moz-range-track
			background: transparent
			border: none

		&::-ms-track 
			width: 100%
			height: $slider-track-min-height
			background: none
			border: none
			color: transparent
		
		&::-ms-fill-lower
			padding: 0
		&::-ms-fill-upper
			padding: 0

		// -- THUMB
		&::-webkit-slider-thumb, &::-moz-range-thumb
			+appear(none)
		
		&:focus
			outline: none

		&[disabled]
			cursor: unset

		&::-ms-tooltip
			display: none

.slider-track-container
	position: absolute
	display: flex

	overflow: hidden
	transform: translate(0, -#{ round($slider-track-min-height/2) })

	margin: 0 #{ $slider-margin + round($slider-thumb-size/2) }
	padding: 0

	left: 0

	width: calc(100% - #{ 2 * $slider-margin + $slider-thumb-size })
	height: $slider-track-min-height

	background: transparent
	border: 0

.slider-track-fill
	position: relative
	flex: 0
	padding: 0

.slider-track
	position: relative
	flex: 0
	padding: 0


j|Slider
	IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.SliderRangeModel")
	IBeadView:  ClassReference("org.apache.royale.jewel.beads.views.SliderView")
	//IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout")
	IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.SliderMouseController")

//.SliderTrack
//	position: absolute

//.SliderThumb
//	position: absolute
//	border-radius: 15px

@media -royale-swf
	j|Slider
		iThumbView: ClassReference("org.apache.royale.jewel.beads.views.SliderThumbView")
		iTrackView: ClassReference("org.apache.royale.jewel.beads.views.SliderTrackView")

