//@use "/editor/preview.css";
@use "editor-toolbar";
@use "editor-content";

:root,
:host {
  --w-e-toolbar-color: #595959;
  --w-e-toolbar-bg-color: #fff;
  --w-e-toolbar-active-color: #333;
  --w-e-toolbar-active-bg-color: #f1f1f1;
  --w-e-toolbar-disabled-color: #999;
  --w-e-toolbar-border-color: #e8e8e8;
  --w-e-modal-button-bg-color: #fafafa;
  --w-e-modal-button-border-color: #d9d9d9;
}


.w-e-text-container {
  .w-e-scroll {
    -webkit-overflow-scrolling: touch;
    height: 100%
  }

  [data-slate-editor] {
    padding: 0 1em;
    outline: 0;
    min-height: 100%;
    word-wrap: break-word;
    white-space: pre-wrap;
    border-top: 1px solid transparent;

    [data-selected=true] {
      box-shadow: 0 0 0 2px var(--w-e-textarea-selected-border-color)
    }
  }
}


.w-e-text-placeholder {
  position: absolute;
  left: 10px;
  top: 17px;
  width: 90%;
  font-style: italic;
  color: var(--w-e-textarea-slight-color);
  pointer-events: none;
  user-select: none
}

.w-e-progress-bar {
  background-color: var(--w-e-textarea-handler-bg-color);
  height: 1px;
  position: absolute;
  transition: width .3s;
  width: 0
}

.w-e-full-screen-container {
  position: fixed;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;

  [data-w-e-textarea=true] {
    flex: 1 !important
  }
}

.w-e-max-length-info {
  bottom: .5em;
  right: 1em;
  color: var(--w-e-textarea-slight-color);
  pointer-events: none;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}