/**
 * @author Neverthink.tools <team@neverthink.tools>
 * @version 0.1
 *
 * Wpui Module: Input\Radio
 */

input.wpui-radio {
	--radio-size: var( --option-size );

	--radio-color: var( --option-color );
	--radio-background: var( --option-background );
	--radio-border-color: var( --option-border-color );

	--radio-color--hover: var( --option-color--hover );
	--radio-background--hover: var( --option-background--hover );
	--radio-border-color--hover: var( --option-border-color--hover );

	--radio-color--active: var( --option-color--active );
	--radio-background--active: var( --option-background--active );
	--radio-border-color--active: var( --option-border-color--active );

	display: block;
	box-sizing: border-box;
	box-shadow: none;
	margin: 0;
	margin-top: 0 !important;
	margin-right: 0.4em;
	position: relative;
	flex-shrink: 0;
	align-self: flex-start;
	
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;

	color: var( --radio-color );
	background: var( --radio-background );
	border: var( --border-width ) solid var( --radio-border-color );
	border-radius: var( --radio-size );
	width: var( --radio-size );
	height: var( --radio-size );
}

input.wpui-radio.icons-after {
	order: 1;
	margin-left: 0.4em;
	margin-right: 0;
}

input.wpui-radio:checked::before {
	background: var( --color__primary );
	width: calc( var( --radio-size ) * 0.5 );
	height: calc( var( --radio-size ) * 0.5 );
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: var( --radio-size );

	-webkit-transform: translate( -50%, -50% );
	-moz-transform: translate( -50%, -50% );
	transform: translate( -50%, -50% );
}

input.wpui-radio:not( :checked ):hover,
.wpui-setting.is-option:hover > .wpui-field-wrap > input.wpui-radio:not( :checked ) {
	color: var( --radio-color--hover );
	background: var( --radio-background--hover );
	border-color: var( --radio-border-color--hover );
}

input.wpui-radio:not( :checked ):active,
.wpui-setting.is-option:active > .wpui-field-wrap > input.wpui-radio:not( :checked ) {
	color: var( --radio-color--active );
	background: var( --radio-background--active );
	border-color: var( --radio-border-color--active );
}



input.wpui-radio.primary,
input.wpui-radio.secondary {
	--radio-border-color: var( --color__primary );
	--radio-border-color--hover: var( --color__primary );
	--radio-border-color--active: var( --color__primary );
}