@import "__quill-strokes.css";
/* ---------------------------------- QUILL --------------------------------- */

/* ---------------------------- PARENT CONTAINER ---------------------------- */
.ql-bubble.ql-container {
	background-color: var(--panel-color);
	border: solid 1px var(--border-color);
	border-radius: 4px;

	min-height: 140px;
	width: 100%;
}

.bgc-primary .ql-bubble.ql-container,
.bgc-secondary .ql-bubble.ql-container {
	background-color: var(--background-color);
}

/* modals */
.modal .ql-bubble.ql-container {
	min-height: 120px;
}

/* div within */
.ql-bubble.ql-container .ql-editor {
	min-height: inherit;
	overflow: visible;
}
/* -------------------------------------------------------------------------- */

/* ------------------------------- PLACEHOLDER ------------------------------ */
div.ql-editor.ql-blank::before {
	color: #6c757d;
	font-size: 14px;
	font-weight: 200;
}
/* -------------------------------------------------------------------------- */

/* ----------------------------- QUILL CONTAINER ---------------------------- */
div.ql-editor {
	padding: 16px 19px;
}
.ql-container.ql-bubble div.ql-editor a {
	white-space: pre-wrap;
}
div.ql-editor p {
	margin-bottom: 1rem;
}
div.ql-editor > * {
	overflow-wrap: anywhere;
}
/* -------------------------------------------------------------------------- */

/* ---------------------------- TOOLBAR CONTAINER --------------------------- */
.ql-bubble div.ql-tooltip {
	background-color: var(--panel-alt-color);
	border-radius: 4px;
}

.ql-toolbar {
	min-width: max-content;
}
/* -------------------------------------------------------------------------- */

/* ------------------------------ TOOLBAR ARROW ----------------------------- */
/* Quill Toolbar Arrow */
.ql-bubble .ql-tooltip.ql-flip span.ql-tooltip-arrow {
	border-top-color: var(--panel-alt-color);
}
.ql-bubble .ql-tooltip:not(.ql-flip) span.ql-tooltip-arrow {
	border-bottom-color: var(--panel-alt-color);
}
/* -------------------------------------------------------------------------- */

/* --------------- TOOLBAR BUTTON CONTAINERS FOR BORDER RIGHT --------------- */
.ql-bubble .ql-toolbar .ql-formats:nth-child(1),
.ql-bubble .ql-toolbar .ql-formats:nth-child(2) {
	border-right: solid 1px var(--tc-primary);
	padding-right: 6px;
	margin-right: 6px;
}
/* -------------------------------------------------------------------------- */

/* ---------------------------- LI Indent Styling ---------------------------- */
.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
	padding-left: 0px !important;
}
li.ql-indent-1:not(.ql-direction-rtl) {
	margin-left: 1.5em !important;
}
li.ql-indent-2:not(.ql-direction-rtl) {
	margin-left: 3em !important;
}
li.ql-indent-3:not(.ql-direction-rtl) {
	margin-left: 4.5em !important;
}
li.ql-indent-4:not(.ql-direction-rtl) {
	margin-left: 6em !important;
}
li.ql-indent-5:not(.ql-direction-rtl) {
	margin-left: 7.5em !important;
}
li.ql-indent-6:not(.ql-direction-rtl) {
	margin-left: 9em !important;
}
li.ql-indent-7:not(.ql-direction-rtl) {
	margin-left: 10.5em !important;
}
li.ql-indent-8:not(.ql-direction-rtl) {
	margin-left: 12em !important;
}
/* ------------------------------------------------------------------------ */

/* ---------------------------- SUMMER NOTE ------------------------------- */
.note-editor.note-airframe .note-editing-area .note-editable,
.note-editor.note-frame .note-editing-area .note-editable {
	background-color: var(--panel-color);
	color: var(--tc-primary);
}

.note-editor.note-airframe .note-statusbar .note-resizebar,
.note-editor.note-frame .note-statusbar .note-resizebar {
	background-color: var(--background-color);
}

.note-toolbar .note-btn-group i,
.note-toolbar .note-btn-group button {
	color: var(--tc-primary);
}