.slate-wrapper {
  /* border: 1px solid rgb(227, 227, 227); */
  background-color: #fff;
  /* border-radius: 3px; */
  overflow: hidden;
}

.slate-editor pre {
  padding: 10px;
  background-color: #eee;
  white-space: pre-wrap;
}

.slate-editor *:not(pre) > code {
  font-family: monospace;
  background-color: #eee;
  padding: 3px;
}

.slate-editor  img {
  max-width: 100%;
  max-height: 20em;
}

.slate-editor  img.active {
  box-shadow: 0 0 0 2px blue;
}

.slate-editor blockquote {
  border-left: 2px solid #ddd;
  margin-left: 0;
  margin-right: 0;
  padding-left: 10px;
  color: #aaa;
  font-style: italic;
}

.slate-editor blockquote[dir='rtl'] {
  border-left: none;
  padding-left: 0;
  padding-right: 10px;
  border-right: 2px solid #ddd;
}

.slate-editor table {
  border-collapse: collapse;
}

.slate-editor td {
  padding: 10px;
  border: 2px solid #ddd;
}

.slate-editor input {
  box-sizing: border-box;
  font-size: 0.85em;
  width: 100%;
  padding: 0.5em;
  border: 2px solid #ddd;
  background: #fafafa;
}

.slate-editor input:focus {
  outline: 0;
  border-color: blue;
}

.slate-editor {
  background-color: #fff;
  padding: 0 0 12px;
}

/**
 * Icons.
 */

.material-icon {
  font-size: 24px;
  display: flex;
}

/**
 * Example.
 */

.slate-editor .example,
.slate-editor .error {
  max-width: 42em;
  margin: 0 auto 20px;
  padding: 20px;
}

.slate-editor .example {
  background: #fff;
}

.slate-editor .error {
  background: #fffae0;
}

.slate-editor .error .info {
  background: #fbf1bd;
  white-space: pre;
  overflow-x: scroll;
  margin-bottom: 0;
}

.slate-editor > * > * + * {
  margin-top: 1em;
}

.slate-menu > * {
  display: inline-block;
}

.slate-menu > * + * {
  margin-left: 15px;
}