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

// CheckBox variables
$checkbox-button-size: 24px
$checkbox-button-xoffset: 0px
$checkbox-button-yoffset: 0px

.jewel.checkbox
	display: inline-flex
	position: relative

	margin: 0
	padding: 0

	// width: 100%
	height: auto //$checkbox-button-size

	// -- INPUT
	input
		+appear(none)
		display: inline-flex

		margin: 0
		padding: 0

		width: $checkbox-button-size
		height: $checkbox-button-size

		// line-height: $checkbox-button-size
		opacity: 0

		+ span::before
			content: ' '
			position: absolute

			left: $checkbox-button-xoffset
			top: $checkbox-button-yoffset

			width: $checkbox-button-size - 2
			height: $checkbox-button-size - 2
		
		+ span::after
			content: ' '
			position: absolute

			width: $checkbox-button-size - 2
			height: $checkbox-button-size - 2

			left: $checkbox-button-xoffset
			top: $checkbox-button-yoffset

			opacity: 0
			
		&:checked + span::after, &:checked:active + span::after, &:indeterminate + span::after, &:indeterminate:active + span::after
			opacity: 1

		&:focus + span::before, &:checked:focus + span::before, &:checked:active:focus + span::before, &:indeterminate:focus + span::before, &:indeterminate:active:focus + span::before
			outline: none

		&[disabled]
			& + span
				cursor: unset

	// -- LABEL
	span
		cursor: pointer

		margin: auto
		width: inherit
		// vertical-align: top

		// line-height: $checkbox-button-size + 2

j|CheckBox
	// IBeadView:  ClassReference("org.apache.royale.jewel.beads.views.CheckBoxView")

// @media -royale-swf
	j|CheckBox
		// --- IBeadModel: ClassReference("org.apache.royale.html.beads.models.ToggleButtonModel")
		IBeadView:  ClassReference("org.apache.royale.jewel.beads.views.CheckBoxView")
		//font-size: 11px
		//font-family: Arial

// Jewel CheckBoxSwitch

// CheckBoxSwitch variables
$switch-button-size: 24px
$switch-button-offset: 2px
$switch-inner-size: $switch-button-size - (2 * $switch-button-offset)

.jewel.switch
	display: inline-flex
	position: relative
	// width: 0
	height: auto

	input
		+appear(none)
		display: inline-flex
		opacity: 0
		width: ($switch-button-size * 2) - ($switch-button-offset * 2)
		height: $switch-button-size
		margin: 0
		padding: 0
	
		&[disabled]
			& + span
				cursor: unset
	
	.switch
		position: absolute
		cursor: pointer
		top: 0
		left: 0
		right: 0
		bottom: 0
		width: ($switch-button-size * 2) - ($switch-button-offset * 2)
		height: $switch-button-size
		
		&::before
			position: absolute
			content: ""
			height: $switch-inner-size
			width: $switch-inner-size
			left: $switch-button-offset
			bottom: $switch-button-offset

	.label
		cursor: pointer

		margin: auto
		width: inherit