/* style picker api */
/* how to use: 
*
Markup (good to style one input different than other):
<!-- simply use a placeholder as class on your input elment -->
	<input type="date" class="show-week" />
CSS:
//replace the placeholder with .input-picker or (.input-date-picker)
	.input-picker .ws-week {
		display: table-cell;
	}
SASS:
//use the placeholder(s) and go crazy
	.input-picker {
		@extend %show-week;
		//@extend show-selectnav;
	}
*
*/


@function wsem($pixels, $context: 13) {
	@return #{$pixels/$context}em
}

$pickerapis: show-week show-yearbtns hide-btnrow show-uparrow show-selectnav;

%show-week {
	.ws-week {
		display: table-cell;
	}
}

%show-yearbtns {
	.ws-picker-header {
		margin: 0 wsem(55);
	}
	
	button.ws-year-btn {
		display: inline-block;
	}
}


%hide-btnrow {
	.ws-button-row {
		display: none;
	}
}

%show-uparrow {
	.ws-picker-header > button:after {
		display: inline-block;
	}
}

%show-selectnav {
	@extend %show-uparrow;
	.ws-picker-header {
		> select {
			display: inline-block;
		}
		
		> button {
			width: auto;
			
			> span {
				display: none;
			}
		}
		
	}
}

/* btn api */

$btnapis: hide-spinbtns hide-dropdownbtn hide-inputbtns inputbtns-outside a11yhide-inputbtns;

%hide-spinbtns {
	+ .input-buttons > .step-controls,
	.input-buttons > .step-controls {
		display: none;
	}

	input[type="number"],
	&[type="number"], {
		-moz-appearance: textfield;
	}

	&::-webkit-inner-spin-button,
	::-webkit-inner-spin-button {
		display: none;
	}
}

%hide-dropdownbtn {
	+ .input-buttons > .ws-popover-opener,
	.input-buttons > .ws-popover-opener {
		display: none;
	}
}

%hide-inputbtns {
	+ .input-buttons,
	.input-buttons {
		display: none;
	}

	input[type="number"],
	&[type="number"], {
		-moz-appearance: textfield;
	}

	&::-webkit-inner-spin-button,
	::-webkit-inner-spin-button {
		display: none;
	}
}

%a11yhide-inputbtns {
	+ .input-buttons,
	.input-buttons {
		width: 0;
		margin: 0;
		overflow: visible;
		
		> .step-controls {
			display: none;
		}
		
		> .ws-popover-opener {
			height: 0;
			width: 0;
			overflow: hidden;
			
			&:focus,
			&:active {
				height: 19px;
				width: 19px;
			}
		}
	}
}

%inputbtns-outside {
	+ span.input-buttons,
	span.input.input-buttons {
		margin-left: 2px;
		
		&.ws-is-rtl {
			margin-left: 0;
			margin-right: 2px;
		}
	}
}

$rangeapis: show-ticklabels show-tickvalues hide-ticks show-valuetooltip show-labeltooltip show-activevaluetooltip show-activelabeltooltip;

%show-ticklabels {
	.ws-range-ticks[data-label]:after {
		display: inline-block;
	}
}

%show-tickvalues {
	.ws-range-ticks:before {
		display: inline-block;
	}
}

%hide-ticks {
	.ws-range-ticks {
		display: none;
	}
}

%show-valuetooltip {
	span.ws-range-thumb > span {
		&,
		> span:after {
			display: inline-block;
		}
		> span:after {
			content: attr(data-value) !important;
			visibility: visible !important;
		}
	}
}

%show-activevaluetooltip {
	
	&.ws-active span.ws-range-thumb > span,
	.ws-range.ws-active span.ws-range-thumb > span {
		&,
		> span:after {
			display: inline-block;
		}
		> span:after {
			content: attr(data-value) !important;
			visibility: visible !important;
		}
	}
}
%show-labeltooltip {
	span.ws-range-thumb > span {
		&,
		> span:before {
			display: inline-block;
		}
		> span:before {
			content: attr(data-valuetext) !important;
			visibility: visible !important;
		}
	}
}
%show-activelabeltooltip {
	
	&.ws-active span.ws-range-thumb > span,
	.ws-range.ws-active span.ws-range-thumb > span {
		&,
		> span:before {
			display: inline-block;
		}
		> span:before {
			content: attr(data-valuetext) !important;
			visibility: visible !important;
		}
	}
}