/*!
 * yseditor - A simple and extensible web editor.
 * Author: Yusuf Sezer <yusufsezer@mail.com>
 * Version: v0.1.1
 * Url: https://github.com/yusufsefasezer/ysEditor.js
 * License: MIT
 */

/* Editor */
/* Toolbar */
/* Content */
/* Footer */
.yseditor {
  max-width: auto !important;
  border: 1px solid #c9cccf;
  border-bottom: none;
  border-radius: 6px;
  overflow: hidden;
}
.yseditor .yseditor-toolbar {
  padding: 3px;
  border-bottom: 1px solid #c9cccf;
  border-top: 1px solid #c9cccf;
  background: #fafafa;
  display: flex;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.yseditor .yseditor-toolbar button {
	width: auto;
	padding: 0;
  	border: none;
	border-radius: 6px;
  	background: none;
  	outline: none;
  	color: gray;
}
.yseditor .yseditor-toolbar button:hover {
  background-color: #eee;
  color: black;
}

.yseditor .yseditor-toolbar button:focus-visible {
  background-color: #eee;
  outline: 1px solid #2e2e2e;
  outline-offset: -2px;
}

.yseditor .yseditor-content {
  background-color: #fcfcfc;
  min-height: 200px;
  max-height: 560px;
  overflow-y: scroll;
  padding: 10px;
}
.yseditor:has(.yseditor-content:focus-visible) {
  border-radius: 4px;
  outline: 1px solid #2e2e2e;
  outline-offset: 2px;
}

/* se non specificato il peso di default dei bold non è sufficiente a far funzionare execCommand('bold') */
.yseditor .yseditor-content b,
.yseditor .yseditor-content strong {
	font-weight: 600;
  }

.yseditor .yseditor-footer {
  background-color: #fafafa;
  border-bottom: 1px solid #c9cccf;
  padding: 10px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.wysiwyg-icon  {
	display: block;
	position: relative;

	margin: 0.25rem;
	width: 1.5rem;
	aspect-ratio: 1 / 1;
	border: 1px solid #CECECE;
	border-radius: 4px;

	background-repeat: no-repeat;
	background-position: center center;
}
.wysiwyg-icon.wysiwyg-text-normal {
	background-image: url('./icons/wysiwyg-icons/format_paragraph.svg');
}
.wysiwyg-icon.wysiwyg-bold {
	background-image: url('./icons/wysiwyg-icons/format_bold.svg');
}
.wysiwyg-icon.wysiwyg-italic {
	background-image: url('./icons/wysiwyg-icons/format_italic.svg');
}
.wysiwyg-icon.wysiwyg-underline {
	background-image: url('./icons/wysiwyg-icons/format_underlined.svg');
}
.wysiwyg-icon.wysiwyg-list {
	background-image: url('./icons/wysiwyg-icons/format_list_bulleted.svg');
}
.wysiwyg-icon.wysiwyg-clear {
	background-image: url('./icons/wysiwyg-icons/format_clear.svg');
}
.wysiwyg-icon.wysiwyg-undo {
	background-image: url('./icons/wysiwyg-icons/undo_icon.svg');
}
.wysiwyg-icon.wysiwyg-redo {
	background-image: url('./icons/wysiwyg-icons/redo_icon.svg');
}
.wysiwyg-icon.wysiwyg-h1 {
	background-image: url('./icons/wysiwyg-icons/format_h1.svg');
}
.wysiwyg-icon.wysiwyg-h2 {
	background-image: url('./icons/wysiwyg-icons/format_h2.svg');
}