#editorjs div.ce-block { border: lightgrey 1px dotted; }
#editorjs div.ce-block div.editorjs_col_1, #editorjs div.ce-block div.editorjs_col_2 { border-left: #dddddd 1px dotted; }
.ce-block__content, main { font-size: 16px; }
.ce-block__content:has(.ce-editorjsColumns_wrapper) { margin: 0; }

#Handle Minicolors for SelectionColorTool
.ce-inline-toolbar:has(.minicolors-custom) {
  overflow: visible !important; /* Prevent clipping of minicolors panel */
  z-index: 1000; /* Above other elements */
  padding: 5px;
}
.ce-popover__items:has(.minicolors-custom) { overflow: hidden; }
.minicolors-custom {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  height: 210px
}
/* Minicolors Input */
#editorjs .minicolors-input {
  height: 24px;
  padding: 2px 4px;
  font-size: 12px;
  line-height: 20px;
  border-radius: 3px;
}
/* Minicolors Panel */
#editorjs .minicolors-panel {
  position: absolute !important;
  top: 100% !important; /* Below input */
  left: 0 !important;
  z-index: 1001 !important; /* Above toolbar */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  background: #fff;
  border: 1px solid #ccc;
}
/* Prevent scrollbar in toolbar */
.ce-inline-tool {
  margin: 0 4px;
  cursor: pointer;
}
.ce-inline-tool svg,
.ce-inline-tool i {
  vertical-align: middle;
}
/* TODO I don't think this is needed
.cdx-text-color,
.cdx-background-color {
  padding: 2px;
}
*/


/* For ImageFromLibrary plugin */
.image-from-library-plugin {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.iflp-rounded--14 {
  border-radius: 14px;
}

.iflp-rounded--5 {
  border-radius: 5px;
}

.iflp-rounded--0 {
  border-radius: 0px;
}

.iflp-image {
  max-width: 100%;
  height: auto;
}

#editorjs image-from-library > div.image-from-library-plugin:has(img.iflp--stretched-image) { 

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.iflp--stretched-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display:block;
}


/* For ButtonTool plugin */
/* button-tool.css */
.button-tool {
  cursor: pointer !important;
  transition: background-color 0.3s ease;
  padding: 8px 16px;
  text-decoration: none !important;
  border-radius: 4px;
  display: inline-block;
}

.button-tool:hover {
  opacity: 0.9;
}
