////////////////////////////////////////////////////////////////////////////////
//
//  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.
//
////////////////////////////////////////////////////////////////////////////////

// import HSlider variables
@import "slider"

// Jewel VSlider

// VSlider variables
$vslider-half-width: #{$slider-container-height/2}
$vslider-margin-left: calc(50% - #{$vslider-half-width})
$vslider-container-min-height: 150px

// Jewel VSlider

//mainly uses the base HSlider styles, but has various extras to override or set styles to support the
//layout via internal rotation transform of the original component approach in nested div elements
//there is some tricky use of a non-visual img element to get layout working with the css transform approach
.vslider
	min-width: $slider-container-height
	min-height: $vslider-container-min-height
	position: relative
	display: inline-block

	.transform-container
		height: 100%
		display: inline-block
		position: absolute
		margin-left: $vslider-margin-left
	.sizer
		height: 100%
		visibility: hidden
	.jewel
		&.slider
			transform: 'translate(-50%, -50%) rotate(270deg) translate(-50%, 50%)'
			left: 0
			right: 0
			top: 0
			// height: $slider-container-height
			position: absolute
			
			input
				margin-left: 0
				margin-right: 0
				width: 100%
	.slider-track-container
		margin: 0
		width: 100%
		padding-left: 5px
		padding-right: 5px

// weird issues with table cells and margins:
// maybe this could be investigated more to see a better solution
$vslider-margin-left-tablecell: calc(50% - #{$vslider-half-width}*2)
.jewel.tablecell
	.vslider
		.transform-container
			margin-left: $vslider-margin-left-tablecell
		// .jewel
		// 	&.slider