.xs-wysiwyg {
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .375rem;
  background: #fff;
}

.xs-wysiwyg-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: .5rem;
  border-bottom: 1px solid rgba(0,0,0,.1);
  background: rgba(0,0,0,.02);
  border-top-left-radius: .375rem;
  border-top-right-radius: .375rem;
}

.xs-wysiwyg-toolbar .xs-wysiwyg-format {
  width: auto;
  min-width: 170px;
}

.xs-wysiwyg-editor {
  padding: .75rem;
  overflow: auto;
  outline: none;
}

.xs-wysiwyg-editor:empty:before {
  content: attr(data-placeholder);
  color: rgba(0,0,0,.45);
}

/* textarea is kept in DOM for forms, but hidden in WYS mode */
.xs-wysiwyg-textarea {
  display: none !important;
}

.xs-wysiwyg.is-text {
  border-style: dashed;
}

.xs-wysiwyg .btn i {
  line-height: 1;
}

@media (max-width: 576px) {
  .xs-wysiwyg-toolbar {
    padding: .4rem;
  }
  .xs-wysiwyg-toolbar .xs-wysiwyg-format {
    min-width: 150px;
  }
}