@import url("../../../styles/styles.css"); /* base styles */

#rendered_view::selection {
	background: transparent;
	background: #33313122;
	background: #ffb600;
	background: #144b76;
	color: #ae51a4;
	color: #3daba7;
	color: #000000;
	color: #eeeeee;
}

body {
	//color: grey;
	//color: #6a6a6a;
}

body:hover #interface {
	//height: 50dvh;
}

#editor_text,
#rendered_view {
	font-size: 1.5rem;
}

#interface {
	display: grid;
	grid-template-rows: repeat(2, 1fr);
	grid-template-columns: repeat(2, 1fr);
	gap: 1em;
	height: calc(100dvh - 2em);
	transition: height .2s;
}

#editor_text {
	grid-area: 1/2/2/3;
	line-height: 2;
	white-space: pre-wrap;
	font-family: rk_coptic, rk_greek;
	font-weight: normal;
	border: none;
	line-height: 1.5;
	tab-size: 1em;
	outline: none;
	caret-color: lightgreen;
	padding-bottom: 2em !important;
}

#rendered_view {
	grid-area: 2/2/3/3;
}

#editor_text,
#rendered_view {
	box-sizing: border-box;
	width: 62vw;
	padding: .5em;
	overflow-y: scroll;
	height: calc(50dvh - 1em);
	border: .5em solid #222;
}

#rendered_view p {
	margin: 0;
	text-indent: 1em;
}

#rendered_view p p {
	margin: 1em 0 0 0;
}

#interface {
	display: flex;
}

#editor_text, #rendered_view {
	outline: 3px solid yellowgreen;
	overflow-y: auto;
	height: calc(100% - 0em);
	transition: height .5s ease-out;
	border: none;
}

#editor_text {
	border: none;
}

#rendered_view {
	border: none;
}

#editor_text, #rendered_view {
	scrollbar-color: #64496a transparent;
	overflow: scroll;
	transition: width .2s;
	outline: none;
}

#full-view {
	scrollbar-color: #64496a transparent;
	overflow: scroll;
	transition: width .2s;
	outline: none;
	border: none;
	box-sizing: border-box;
	font-size: 1.5rem;
}

#full-view p {
	margin: 0;
	text-indent: 1em;
}

#full-view p + p {
	margin: 1em 0 0;
}

#full-view p .coptic.headword {
	line-height: 1;
}


#dictionary {
	
}

#dictionary ul {
	list-style-type: none;
	padding: 0 1em;
}

#dictionary ul .entry {
	overflow-y: hidden;
	list-style-type: none;
	position: relative;
	display: grid;
	grid-template-columns: 1em 1fr;
	//grid-template-columns: 2em 1fr;
	//transition: grid-template-columns .5s;
}

#dictionary ul .entry.collapse {
	//grid-template-columns: 1em 1fr;
}

#dictionary ul .entry .definition p .verbose {
	//background: #ffffff33;
	//transition: font-size .5s;
}

#dictionary ul .entry.collapse .definition p .verbose {
	//background: #ffffff33;
	font-size: 0;
	display: none;
}

#dictionary ul .entry + .entry {
	//margin-top: .5em;
	margin-top: -1px;
}

#dictionary ul .entry .definition p {
	margin: 0;
	padding: 0;
}

#dictionary ul .entry .definition p + p {
	//padding-top: .5em;
}

#dictionary ul .entry .togglable {
	box-sizing: border-box;
	//background: #ffffff22;
	//border-right: 10px solid;
	transition: border .5s;
	//cursor: pointer;
}

#dictionary ul .entry.collapse .togglable {
	//border-right: 10px solid;
}

#dictionary ul .entry .togglable:before {
	content: "";
	display: inline-block;
	box-sizing: border-box;
	width: 1em;
	height: 1em;
	//padding: 5px;
	margin-top: .5em;
	background: #ffffffcc;
	box-shadow: 0px 0px 5px goldenrod;
	border-radius: 50%;
	transition: background .5s, box-shadow .5s;
	cursor: pointer;
}

#dictionary ul .entry.collapse .togglable:before {
	background: #ffffff22;
	box-shadow: none;
}

#dictionary ul .entry .definition {
	//padding-left: 1em;
	transition: padding .5s, border-image .5s;
	padding: .2em 1em .2em 0;
	border-left: 0;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-image: linear-gradient(to right, transparent 0%, grey 50%, grey 100%) 1;
	border-width: 1px;
	border-style: solid;
}

#dictionary ul .entry.collapse .definition {
	padding-left: 0;
	border-image: linear-gradient(to right, transparent 0%, transparent 50%, transparent 100%) 1;
}

#dictionary ul .entry .definition p {
	line-height: 1.5;
}

#dictionary ul .entry .definition p {
	padding-left: 2em;
	padding-right: 0em;
	transition: padding-left .5s, padding-right .5s;
}

#dictionary ul .entry.collapse .definition p {
	padding-left: 0em;
	padding-right: 2em;
}