<commit_before>@import "../variables";

$control-radius: $radius !default;
$control-radius-small: $radius-small !default;

$control-padding-vertical: calc(0.375em - 1px) !default;
$control-padding-horizontal: calc(0.625em - 1px) !default;

@mixin ui-beveled-border {
	border: 1px solid $bevel_down;
	border-top-color: $bevel_up;
}

@mixin ui-appearance-none {
	-webkit-appearance: none;
	-moz-appearance: none;
}

@mixin loader {
	animation: spinAround 500ms infinite linear;
	//border: 2px solid $border;
	border: 2px solid #666;
	border-radius: 290486px;
	border-right-color: transparent;
	border-top-color: transparent;
	content: "";
	display: block;
	height: 1em;
	position: relative;
	width: 1em;
}

@mixin ui-focus-border {
	&:focus {
		border-color: #3273dc;
		box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
		z-index: 2;
	}
}

@mixin ui-loading-base {
	&.is-loading {
		&::after {
			@include loader;

			position: absolute !important;
			right: 0.625em;
			top: 0.625em;
			z-index: 2;						// added to make loading work with focus
		}

		&.is-small:after {
			font-size: $size-small;
		}

		&.is-medium:after {
			font-size: $size-medium;
		}

		&.is-large:after {
			font-size: $size-large;
		}
	}
}

@mixin ui-control-base {
	-moz-appearance: none;
	-webkit-appearance: none;
	align-items: center;
	border: 1px solid transparent;
	border-radius: $control-radius;
	box-shadow: none;
	display: inline-flex;
	font-size: $size-normal;
	height: 2.25em;
	justify-content: flex-start;
	line-height: $input-line-height;
	padding: $control-padding-vertical $control-padding-horizontal;
	position: relative;
	vertical-align: top;

	// States
	&:focus,
	&.is-focused,
	&:active,
	&.is-active {
		outline: none;
	}

	&[disabled] {
		cursor: not-allowed;
	}
}

@mixin ui-input-base {
	@include ui-appearance-none;
	@include ui-control-base;
	@include ui-focus-border;

	padding: $control-padding-vertical $control-padding-horizontal;

	line-height: $input-line-height;
	height: 2.25em;
	border: 1px solid $border; // $input-border-color;
	border-radius: 3px;
	font-size: 1rem;
	font-family: $font-family;				// 20170913 Needed because this is unset in the browser??
	box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
}

@mixin ui-label-base {
	align-items: center;
	box-shadow: none;
	font-size: $size-normal;
	height: 2.25em;
	line-height: $input-line-height;
	padding: $control-padding-vertical $control-padding-horizontal;
	position: relative;<commit_msg>Bugfix: fix missing hover on components.<commit_after>@import "../variables";

$control-radius: $radius !default;
$control-radius-small: $radius-small !default;

$control-padding-vertical: calc(0.375em - 1px) !default;
$control-padding-horizontal: calc(0.625em - 1px) !default;

@mixin ui-beveled-border {
	border: 1px solid $bevel_down;
	border-top-color: $bevel_up;
}

@mixin ui-appearance-none {
	-webkit-appearance: none;
	-moz-appearance: none;
}

@mixin loader {
	animation: spinAround 500ms infinite linear;
	//border: 2px solid $border;
	border: 2px solid #666;
	border-radius: 290486px;
	border-right-color: transparent;
	border-top-color: transparent;
	content: "";
	display: block;
	height: 1em;
	position: relative;
	width: 1em;
}

@mixin ui-focus-border {
	&:focus {
		border-color: #3273dc;
		box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
		z-index: 2;
	}
}

@mixin ui-loading-base {
	&.is-loading {
		&::after {
			@include loader;

			position: absolute !important;
			right: 0.625em;
			top: 0.625em;
			z-index: 2;						// added to make loading work with focus
		}

		&.is-small:after {
			font-size: $size-small;
		}

		&.is-medium:after {
			font-size: $size-medium;
		}

		&.is-large:after {
			font-size: $size-large;
		}
	}
}

@mixin ui-control-base {
	-moz-appearance: none;
	-webkit-appearance: none;
	align-items: center;
	border: 1px solid transparent;
	border-radius: $control-radius;
	box-shadow: none;
	display: inline-flex;
	font-size: $size-normal;
	height: 2.25em;
	justify-content: flex-start;
	line-height: $input-line-height;
	padding: $control-padding-vertical $control-padding-horizontal;
	position: relative;
	vertical-align: top;

	// States
	&:focus,
	&.is-focused,
	&:active,
	&.is-active {
		outline: none;
	}

	&[disabled] {
		cursor: not-allowed;
	}
}

@mixin ui-input-base {
	@include ui-appearance-none;
	@include ui-control-base;
	@include ui-focus-border;

	&:hover,
	&.is-hovered {
		border-color: $input-hover-border-color;
	}

	padding: $control-padding-vertical $control-padding-horizontal;

	line-height: $input-line-height;
	height: 2.25em;
	border: 1px solid $border; // $input-border-color;
	border-radius: 3px;
	font-size: 1rem;
	font-family: $font-family;				// 20170913 Needed because this is unset in the browser??
	box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
}

@mixin ui-label-base {
	align-items: center;
	box-shadow: none;
	font-size: $size-normal;
	height: 2.25em;
	line-height: $input-line-height;
	padding: $control-padding-vertical $control-padding-horizontal;
	position: relative;
{'fraction_non_alphanumeric': 0.15618782331874254, 'fraction_numerical': 0.036211699164345405, 'mean_word_length': 3.7559129612109743, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6747782', 'n_tokens_mistral': 2182, 'n_tokens_neox': 1937, 'n_words': 430}