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

// RadioButton variables
$radiobutton-button-size: 22px
$radiobutton-button-xoffset: 0px
$radiobutton-button-yoffset: 0px

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

	margin: 0
	padding: 0

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

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

		margin: 0
		padding: 0

		width: $radiobutton-button-size
		height: $radiobutton-button-size

		line-height: $radiobutton-button-size
		opacity: 0

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

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

			width: $radiobutton-button-size
			height: $radiobutton-button-size

		+ span::after
			content: ' '
			position: absolute

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

			width: $radiobutton-button-size
			height: $radiobutton-button-size

			opacity: 0

		&:checked + span::after, &:checked:active + span::after
			opacity: 1            
			
		&:focus + span::before, &:checked:focus + span::before, &:checked:active:focus + span::before
			outline: none
			
		&[disabled]
			& + span
				cursor: unset
				
	// -- LABEL
	span
		cursor: pointer

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

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

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