/**
* @stylesheet response-type-text-entry.css Text Entry
* @parent ux.response-types
* User-entered text in all text entry fields is the same size, color, and typeface as the surrounding text. Users are not allowed to resize text entry fields.
**/

.extendedtext,
.fib,
.numeric-entry {
	border: 0.05em solid #767676;
	box-shadow: inset 0 0 0.19em #aaa;
	color: inherit;
	font: inherit;
	resize: none;
	transition: border 0.2s, box-shadow 0.2s;
}

/**
* @styles 0-text-entry-states Field States
* Text entry fields have the following states.
* * _Default_. Text extry fields have a border and an inset shadow to help the user identify them as active controls. No placeholder text (e.g., “Type your answer here.”) is provided.
* * _Focus_. In addition to the dotted outline used throughout the system (as described in the [indicators.css] section), a light blue background is added, and the shadow changes from inset to outset.
* * _Disabled_. The drop shadow is removed to indicate that the field is inactive.
**/

input[type=text]:focus,
textarea:focus {
	background: #F0FAFE;
	background: rgba(0, 174, 239, 0.06);
	box-shadow: 0 0 0.14em 0.05em rgba(0, 0, 0, 0.16);
}

input[type=text]:hover,
input[type=text]:focus,
textarea:hover,
textarea:focus {
	border-color: #383838;
}

table.grid input[type=text] {
	margin-bottom: 0.35em;
}

body.disabled .extendedtext,
.extendedtext.disabled,
body.disabled .fib,
.fib.disabled,
body.disabled .numeric-entry,
.numeric-entry.disabled {
	box-shadow: none;
	pointer-events: none;
}

/**
* @styles 1-text-entry-max-character Max Character Limit
* The user can enter up to 150 characters in a Fill-in-the-blank field and 3,000 characters in an Extended Text field. If the user attempts to enter or paste more than the maximum number of characters, any content over the maximum is truncated, and the __Max-character Limit__ modal dialog is displayed. (See the [dialogs.css] section for information about dialog styles and behavior.)
**/

/**
* @styles 2-text-entry-fib Fill-in-the-blank
* Fill-in-the-blank entry fields (text inputs) are a single line tall and are shown in-line with item text. They have left and right margins to distinguish them from surrounding content. Individual field widths are set based on the length of the expected response or the available space.
*
* If the user enters more characters than will fit in the field, the response scrolls beyond the field’s left edge, as is typical on the web.
*
* In the math assessement, text-entry field height is approximately 3x the line height to accommodate stacked fractions.
* @iframe ../../demos/response-type-text-entry/fib.html 420
**/

.fib,
.numeric-entry {
	margin: 0.13em;
	padding: 0.06em 0.13em;
}

.fib.math {
	height: 3.25em;
	vertical-align: baseline;
}

/**
* @styles 3-text-entry-et Extended Text
* Extended Text entry fields (text areas) are multiple lines tall and stand alone (i.e., not in-line with text). They are left-aligned with item text and take up the full width of the column, or the width of 50 zeros, whichever is smaller. Individual field heights are set based on the length of the expected response or the available space.
*
* If the user enters more characters than will fit in the field, a vertical scrollbar appears, and the response scrolls above the field’s top edge, as is typical on the web.
* @iframe ../../demos/response-type-text-entry/extended-text.html 420
**/

.extendedtext {
	display: block;
	margin: 0;
	max-width: 50ch;
	padding: 0.14em;
	width: 100%;
	word-wrap: break-word;
}

/**
* @styles 3-text-entry-numeric Numeric Entry
* Numeric Entry fields have the same appearance and behavior as Fill-in-the-blank fields. In addition, the system runs one or more types of validation on the response, as set by the item author.
* * _Basic numeric validation_. The system checks whether the response is a number. (Run by default on Numeric Entry fields when no other validation type is defined.)
* * _Number of digits_. The system checks whether the response contains the specified number of digits.
* * _Minimum value_. The system checks whether the response is greater than or equal to the specified value.
* * _Maximum value_. The system checks whether the response is less than or equal to the specified value.
* * _Range_. The system checks whether the response is within the specified range.
*
* If the user-entered text does not validate, an appropriate modal dialog is displayed providing information about the nature of the validation error. (See the [dialogs.css] section for information about dialog styles and behavior.)
**/