/**
* @stylesheet buttons.css Buttons
* @parent ux.ui-elements
**/

/**
* @styles 0-button-types Button Types
* There are two types of buttons.
* * _Raised button_. A rectangular button with a solid background, rounded corners, and a drop shadow. This is the default button type.
* * _Flat button_. A button whose content is bare until the cursor is hovered over it. Used in cases where a multi-color button icon is needed and/or where button density precludes the raised button type (e.g., the [system-toolbar.css], the Writing Editor).
* @iframe ../../demos/buttons/button-types.html 160
**/

.btn {
	background: #666;
	border: 0.1em solid transparent;
	border-radius: 0.17em;
	box-shadow: 0 0.06em 0.14em 0 rgba(0, 0, 0, 0.16), 0 0.06em 0.28em 0 rgba(0, 0, 0, 0.12);
	color: #fff;
	cursor: pointer;
	display: inline-block;
	letter-spacing: 0.02em;
	line-height: 1;
	font-family: inherit;
	font-size: inherit;
	font-weight: normal;
	margin: 0 0.25em;
	padding: 0.55em 1.4em;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	transition: background 0.2s ease-out, border 0.2s ease-out, box-shadow 0.2s ease-out, color 0.2s ease-out;
	user-select: none;
	vertical-align: middle;
}

.btn.btn-circular {
	border-radius: 50%;
	height: 2.2em;
	padding: 0;
	position: relative;
	width: 2.2em; }
.btn.btn-circular::before {
	font-size: 2em; }

.btn.btn-clear-answer {
	display: block;
}

/**
* @styles 1-buttons-states Button States
* ### Raised buttons
* Raised buttons have the following states.
* * _Enabled_. The default state.
* * _Hover_. Visible when the cursor is over the button. Button color is lightened, and the drop shadow increases in size.
* * _Active_. Visible when the user presses down on the button. The drop shadow is removed.
* * _Disabled_. Visible when the button is inactive (e.g., when a modal system tool like scratchwork is enabled). Button color changes to light gray, button text becomes dark gray, and the drop shadow is removed.
*
* Raised buttons can be rectangular (when they contain text, or text and an icon) or circular (when they contain only an icon). Currently, only SBTs use circular buttons.
* @iframe ../../demos/buttons/raised-button-states.html 200
*
*
* ### Flat Buttons
* Flat buttons have the following states.
* * _Enabled_. The default button state.
* * _Hover_. Button background color is lightened, and a border and drop shadow appear.
* * _Active_. The drop shadow becomes inset.
* * _Toggled_. Used when the tool a button controls has on and off states. Button background and border become blue.
* * _Disabled_. Button content is dimmed to indicate inactivity.
* @iframe ../../demos/buttons/flat-button-states.html 160
**/

.btn:hover {
	background: #949494;
	box-shadow: 0 0.14em 0.31em 0 rgba(0, 0, 0, 0.18), 0 0.11em 0.42em 0 rgba(0, 0, 0, 0.15);
}

.btn:active {
	background: #949494;
	box-shadow: none;
}

.btn.disabled:not(.btn-char-vo),
.btn.btn-special.disabled:not(.btn-char-vo),
.btn.btn-danger.disabled:not(.btn-char-vo),
.cta-wrapper.disabled .btn {
	background: #ddd;
	box-shadow: none;
	color: #888;
	pointer-events: none;
}

/**
* @styles 2-buttons-colors Raised Button Colors
*
* As indicated in the [colors.css] section, raised buttons vary in color depending on the type of action they trigger:
* * Gray `#666666` is used by default. Most buttons are gray (e.g., __Clear Answer__ buttons).
* * Blue `#0068D1` is used for high-importance actions (e.g., the __Show Questions__ button in reading discrete blocks).
* * Red `#CC0000` is used for actions that may require caution (e.g., __Submit__ buttons in scenario-based tasks).
* @iframe ../../demos/buttons/button-colors.html 95
**/

.btn.btn-special {
	background: #0068D1; }
.btn.btn-special:hover,
.btn.btn-special:active {
	background: #008efa; }

.btn.btn-danger {
	background: #cc0000; }
.btn.btn-danger:hover,
.btn.btn-danger:active {
	background: #db4d4d; }