@import '../vendor/wysihtml5';

.editor__content{
  position: relative;
}

.editor__textarea {
  background-color: $gray-light;
  padding: 10px;

	body {
		font-size: 22px;
		font-family: AvenirRoman;
		color: $blue;
		line-height: 1.2;
	}

	h1 {
		font-size: 48px;
	}

	h2 {
		font-size: 39px;
	}

	h3 {
		font-size: 31px;
	}

	h4 {
		font-size: 25px;
	}

	h1,
	h2,
	h3,
	h4 {
		line-height: 1.2em;
		margin-bottom: 1.1em;
	}

	p,
	li {
		line-height: 1.4em;
		margin-bottom: 1.4em;
	}

	ul {
		padding-left: 40px;
		list-style: disc;

		ul {
			list-style: circle;
		}
	}

	ol {
		padding-left: 40px;
		list-style: decimal;

		ol {
			list-style: lower-alpha;
		}
	}

	ol,
	ul {
		ol,
		ul {
			padding-bottom: 0;
		}
	}

	b,
	strong {
		font-weight: bold;
	}

	i,
	em {
		font-style: italic;
	}

	a {
		cursor: pointer;
		color: $blue;

		&:hover {
			text-decoration: underline;
		}

		&:visited {
			color: $medium-blue;
		}
	}

	.text--annotated,
	a.text--annotated {
		background: #b6cad1;
		color: #fff;
		text-decoration: none;
		padding: 1px 3px;

		&:after {
			content: ' *';
			font-weight: normal;
		}
	}
}

.editor__toolbar {
	border: 1px solid $gray-light;
	position: relative;
	border-bottom: none;
	padding: 10px;

	+ textarea {
		height: 400px;
		display: block;
		font: 14px/1 Consolas, "Lucida Console", Monaco, monospace;
	}
}

.wysihtml-command-active{
  background: $gray-light;
}

.editor__buttons {
	@include microfix;

	a {
		color: $black;
		display: block;
		float: left;
		text-align: center;
		padding: 7px 10px;
		text-transform: uppercase;
		min-width: 20px;

		sup {
			font-size: 13px;
		}

		&:hover {
			background-color: $gray-light;
		}

		&.wysihtml5-action-active,
		&.wysihtml5-command-active {
			background-color: $blue;
			color: #fff;
		}

		+ a {
			border-left-width: 0;
		}
	}

	.spacer {
		margin-right: 20px;
	}

	.disabled,
	.disabled:hover {
		background-color: $white;
		cursor: default;
		color: $gray-light;
	}
}

.editor__modal {
	@include box-shadow;
	position: absolute;
	top: 100%;
	left: 50%;
	margin-top: $spacer;
	background: $white;
	border: 1px solid $gray-light;
	padding: 20px;
	width: 400px;
	margin-left: -200px;
	z-index: 1;

	textarea {
		padding: 10px;
		height: 70px;
	}

	.button-group {
		padding-top: 20px;
		margin-top: 30px;
	}
}

.editor__annotations {
	visibility: hidden;
	position: absolute;
	width: 0;
	height: 0;
}

.wysihtml-sandbox {
	height: 400px;
	width: 100%;
}
