/* =Bash It Out plugin styles
-------------------------------------------------------------- */

/**
* #.# General styles and layout
**/
.bash-it-out__container {
	margin:	20px 40px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	position: relative;
}
/* The states of the app: */
.bash-it-out__container.bash-it-out__paused {}
.bash-it-out__container.bash-it-out__loading {}
.bash-it-out__container.bash-it-out__complete {}
.bash-it-out__container.bash-it-out__annoy {}
.bash-it-out__container.bash-it-out__editor-active {}

.bash-it-out__fist {
	display: inline-block;
	max-width: 70px;
	float: left;
	margin: 0 10px 20px 0;
}

.bash-it-out__sidebar {
	display: block;
	order: 1;
	flex-basis: 30%;
	margin: 0 20px;
	padding: 20px;
	box-sizing: border-box;
}

.bash-it-out__editor-container {
	display: block;
	order: 0;
	flex-basis: 70%;
	box-sizing: border-box;
}

/* Settings block mobile device breakpoint */
@media all and ( max-width: 782px ) {
	.bash-it-out__container {
		flex-direction: column;
	}

	.bash-it-out__editor-container {
		order: 1;
		width: 100%;
	}

	.bash-it-out__sidebar {
		order: 0;
		margin: 0;
	}
}

/**
* #.# Settings form
*
* The settings panel controlling the wordcount/time limit etc.
*/
.bash-it-out__settings {
	margin-bottom: 15px;
	padding: 10px;
	border: 1px solid #bbb;
	border-bottom-color: #aaa;
	border-right-color: #aaa;
	box-sizing: border-box;
	background: #ccc;
	display: block;
	clear: both;
}

.bash-it-out__fieldset-saved-posts label,
.bash-it-out__settings label {
	display: block;
	margin-bottom: 15px;
}

.bash-it-out__label-text {
	font-weight: bold;
}

.bash-it-out__settings p {
	margin: 0;
}

.bash-it-out__fieldset-saved-posts select,
.bash-it-out__fieldset-saved-posts button,
.bash-it-out__settings input,
.bash-it-out__settings button,
.bash-it-out__settings select {
	width: 100%;
	display: block;
}

.bash-it-out__settings .button.bash-it-out__start {
	font-size: 14px;
	height: 50px;
}

.bash-it-out__tooltip {
	position: relative;
	display: inline-block;
	line-height: 1.4;
}

.bash-it-out__tooltip-content {
	position: absolute;
	width: 180px;
	margin: 0;
	padding: 10px;
	background: #fff;
	border: #aaa;
	display: none;
	line-height: 1;
	font-family: inherit;
	z-index:10005;
	border: 1px solid #aaa;
	left: -90px;
}

.bash-it-out__tooltip:hover .bash-it-out__tooltip-content,
.bash-it-out__tooltip:focus .bash-it-out__tooltip-content {
	display: block;
}

.bash-it-out__settings .button-large .dashicons {
	line-height: 1.3;
}

.bash-it-out__label-group {
	display: block;
}

.bash-it-out__fieldset-saved-post {
	text-align: right;
}

.bash-it-out__fieldset-saved-posts {
	width: 100%;
}

.bash-it-out__fieldset-saved-posts.hidden {
	display: none;
}

/* Settings block mobile device breakpoint */
@media all and ( max-width: 782px ) {
	.bash-it-out__settings {
		margin-bottom: 15px;
	}

	.bash-it-out__fieldset-saved-posts {
		font-size: inherit;
	}

	.bash-it-out__settings .button-large .dashicons {
		line-height: 1;
	}
}

/**
* #.# Overseer
*
* The information panel displayed when the editor is active.
*/
.bash-it-out__overseer {
	background: gold;
	display: none;
	z-index: 10003;
	position: relative;
	width: 100%;
	left: auto;
	padding: 20px 15px;
	box-sizing: border-box;
	position: absolute;
	height: 100px;
	bottom: -100px;
}

.bash-it-out__complete .bash-it-out__overseer {
	background: lightgreen;
}

.bash-it-out__editor-active .bash-it-out__overseer {
	display: block;
}

.bash-it-out__overseer-container {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	text-align: center;
}

.bash-it-out__overseer-container h3 {
	padding: 0;
	margin: 0 0 15px 0;
	font-size: 13px;
}

.bash-it-out__overseer-column {
	flex-basis: 200px;
}

.bash-it-out__autosave {
	text-align: left;
	display: block;
	font-style: italic;
}

.bash-it-out__overseer .bash-it-out__overseer-quit.button,
.bash-it-out__overseer .bash-it-out__overseer-pause.button {
	height: auto;
	padding: 15px;
	font-size: 16px;
	min-width: 80px;
	line-height: 1.3;
}

.bash-it-out__overseer .dashicons-controls-pause,
.bash-it-out__paused .bash-it-out__overseer .dashicons-controls-play {
	display: inline-block;
}

.bash-it-out__overseer .dashicons-controls-play,
.bash-it-out__paused .bash-it-out__overseer .dashicons-controls-pause {
	display: none;
}

.bash-it-out__paused .bash-it-out__overseer h3,
.bash-it-out__paused .bash-it-out__overseer output,
.bash-it-out__paused .bash-it-out__overseer time {
	opacity: 0.5;
}

.bash-it-out__words-remaining,
.bash-it-out__time-remaining {
	display: block;
	font-style: italic;
	font-weight: bold;
	font-size: 28px;
}

.bash-it-out__progressbar {
	display: block;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
}

/* Overseer block mobile device breakpoint */
@media all and ( max-width: 782px ) {
	.bash-it-out__overseer {
		height: 130px;
		bottom: -130px;
	}

	.bash-it-out__time-remaining {
		margin: 15px 0;
	}

	.bash-it-out__overseer .bash-it-out__overseer-quit.button,
	.bash-it-out__overseer .bash-it-out__overseer-pause.button {
		height: auto;
		padding: 10px;
		font-size: 16px;
	}

	.bash-it-out__overseer-container {
		flex-wrap: wrap;
	}

	.bash-it-out__overseer-column {
		flex-basis: auto;
		flex: 1;
	}

	.bash-it-out__overseer-column:nth-child( 1 ) {
		order: 4;
		display: none;
	}

	.bash-it-out__overseer-column:nth-child( 2 ) {
		order: 2;
		flex: 100%;
	}

	.bash-it-out__overseer-column:nth-child( 2 ) h3 {
		display: none;
	}

	.bash-it-out__overseer-column:nth-child( 3 ) {
		order: 3;
		display: none;
	}

	.bash-it-out__overseer-column:nth-child( 4 ) {
		order: 0;
	}

	.bash-it-out__overseer-column:nth-child( 5 ) {
		order: 1;
	}
}

/**
* #.# Editor
*
* The editor's text area
*/
.bash-it-out__editor-active .bash-it-out__editor-container {
	width: 90%;
	z-index: 10002;
	box-sizing: border-box;
	position: absolute;
}

.bash-it-out__editor-active .bash-it-out__current-post-title {
	background: white;
	padding: 10px;
	margin: 0;
	line-height: 1.2;
}

.bash-it-out__editor-active .bash-it-out__reset-container {
	display: none;
}

.bash-it-out__reset-container {
	text-align: right;
	margin-bottom: 20px;
	font-size: 11px;
}

.bash-it-out__reset-container span {
	vertical-align: middle;
	display: inline-block;
}

/* Editor images */
.bash-it-out__annoying-editor,
.bash-it-out__happy-editor {
	display: none;
	position: absolute;
	top: -50px;
	transform: scale( 0.8 );
}

.bash-it-out__annoy .bash-it-out__annoying-editor {
	display: block;
	animation: barge-in 0.5s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}

.bash-it-out__complete .bash-it-out__happy-editor {
	display: block;
	animation: barge-in-and-bulge .5s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	right: -80px;
}

@keyframes barge-in {
	from {
		opacity: 0;
		right: -250px;
	}
	to   {
		opacity: 1;
		right: -50px;
	}
}

@keyframes barge-in-and-bulge {
	0% {
		transform: scale( 0.8 );
	}
	50% {
		transform: scale( 1 );
	}
	100% {
		transform: scale( 0.8 );
	}
}

/* Editor block mobile device breakpoint */
@media all and ( max-width: 782px ) {
	.bash-it-out__reset-container,
	.bash-it-out__reset-container button {
		width: 100%;
	}

	.bash-it-out__annoying-editor,
	.bash-it-out__happy-editor {
		max-width: 200px;
	}
}

/**
* #.# Background styles
*
* The opaque background when the editor is active
*/
.bash-it-out__shadow-background {
	display: none;
}

.bash-it-out__editor-active .bash-it-out__shadow-background {
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10001;
	background-color: rgba( 0, 0, 0, 0.77 );
}

.bash-it-out__complete .bash-it-out__shadow-background {
	background-color: rgba(84, 200, 255, 0.77);
}

.bash-it-out__annoy .bash-it-out__shadow-background {
	animation-name: annoy_me;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

@keyframes annoy_me {
	from {
		background-color: rgba( 0, 0, 0, 0.77 );
	}
	to {
		background-color: rgba( 255, 10, 39, 0.77 );
	}
}