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

.wpui-setting.is-option {
	--option-size: 1.5em;

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

	--option-color--hover: var( --text-color );
	--option-background--hover: var( --background-color--darker );
	--option-border-color--hover: var( --border-color );

	--option-color--active: var( --text-color );
	--option-background--active: var( --medium-background-color );
	--option-border-color--active: var( --border-color );

	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	cursor: pointer;
	color: var( --option-color );
}

.wpui-options:not( [data-display*="button"] ):not( [data-display*="card"] ) .wpui-setting.is-option:not( :last-child ) {
	margin-bottom: 0.5em;
}



/**
 * Display: Button
 *
 * @since 0.1
 */
input.wpui-option[data-display*="button"]:checked + .wpui-label {
	z-index: 40;
}

input.wpui-option[data-display*="button"]:not( :checked ) + .wpui-label {
	font-weight: 400;
}

	input.wpui-radio:not( [data-display*="button"] ):not( [data-display*="card"] ) + .wpui-label span:not( :empty ) + .dashicons:last-child:not( :first-child ),
	input.wpui-checkbox:not( [data-display*="button"] ):not( [data-display*="card"] ) + .wpui-label span:not( :empty ) + .dashicons:last-child:not( :first-child ) {
		display: none;
	}



/**
 * Display: Card
 *
 * @since 0.1
 */
.wpui-options[data-display*="card"] .wpui-setting.is-option {
	max-width: calc( 50% - 1em );
	min-width: calc( 33.3333333333% - 1em );
}

.wpui-options[data-display*="card"] .wpui-setting.is-option:nth-child( n + 4 ) {
	max-width: calc( 33.3333333333% - 1em );
}

input.wpui-option[data-display*="card"]:not( :checked ) + .wpui-label {
	font-weight: 400;
}