@charset "UTF-8";
/* Config */
/* CSS */
.wysiwyg {
  display: block;
  color: black;
  background: none transparent;
  border: 1px solid #ddd;
  border-radius: 0.2rem;
  transition: border 0.2s;
  /* active: change border */
}
.wysiwyg:focus-within, .wysiwyg.focus {
  border-color: Highlight;
}
.wysiwyg {
  /* contenteditable + textarea */
}
.wysiwyg > [contenteditable=true],
.wysiwyg > .contenteditable {
  display: block;
  outline: none;
  word-wrap: break-word;
  padding: 0.3rem 0.5rem;
  overflow: hidden;
}
.wysiwyg > textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 1.15rem;
  margin: 0.3rem 0.5rem;
  padding: 0;
  border: none;
  background: transparent none;
  -webkit-appearance: none;
  overflow: auto;
  outline: none;
  box-shadow: none;
  resize: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  transition: height 0.3s;
}
.wysiwyg > textarea:focus {
  height: 5rem;
}
.wysiwyg > [contenteditable=true] ~ textarea {
  display: none !important;
}
.wysiwyg {
  /* placeholder - ':placeholder-shown' only works with input/textarea */
}
.wysiwyg > [contenteditable=true]:empty:before,
.wysiwyg > .contenteditable:empty:before {
  content: "​"; /* Keep distance */
  display: block; /* For Firefox */
  opacity: 0.54; /* https://developer.mozilla.org/de/docs/Web/CSS/%3A%3A-moz-placeholder */
  white-space: nowrap;
  cursor: text;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  pointer-events: none;
}
.wysiwyg > [contenteditable=true][data-placeholder]:empty:before,
.wysiwyg > .contenteditable[data-placeholder]:empty:before {
  content: "​" attr(data-placeholder); /* ZWSP if placeholder empty, IE11 puts caret after placeholder */
}

/* popup - can be placed anywhere in the DOM */
.wysiwyg-popup {
  position: absolute;
  z-index: 9999;
  color: black;
  background: white;
  background: rgba(255, 255, 255, 0.9);
  left: -50%;
  border: 1px solid #ddd;
  border-radius: 0.2rem;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.wysiwyg-popup.animate-down {
  transform-origin: top;
  animation: transformer 0.2s ease-out 0s 1;
}
.wysiwyg-popup.animate-up {
  transform-origin: bottom;
  animation: transformer 0.2s ease-out 0s 1;
}
.wysiwyg-popup.hyperlink {
  width: 25rem;
  max-width: 90vw;
}
.wysiwyg-popup.hyperlink > input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0.3rem 0.5rem;
  border: none;
  background: transparent none;
  -webkit-appearance: none;
  box-shadow: none;
  font-family: inherit;
}
.wysiwyg-popup.palette td {
  width: 0.5rem;
  height: 0.5rem;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.wysiwyg-popup .suggestion {
  display: block;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
}
.wysiwyg-popup .suggestion:hover, .wysiwyg-popup .suggestion:first-of-type {
  color: HighlightText;
  background-color: Highlight;
}

@keyframes transformer {
  from {
    opacity: 0;
    transform: scale(0.5, 0);
  }
  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}
/* toolbar */
.wysiwyg .toolbar,
.wysiwyg-popup .toolbar {
  white-space: nowrap;
}
.wysiwyg .toolbar *,
.wysiwyg-popup .toolbar * {
  vertical-align: middle;
}

.wysiwyg > .toolbar-top {
  border-bottom: 1px solid #ddd;
}
.wysiwyg > .toolbar-bottom {
  border-top: 1px solid #ddd;
}
.wysiwyg {
  /* https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css */
}
.wysiwyg > .toolbar-auto {
  display: flex;
  overflow: hidden;
}
.wysiwyg > .toolbar-auto:after {
  content: "";
  height: 1rem;
  max-height: 0;
  transition: height 0.2s, max-height 0s 0.2s;
}
.wysiwyg > .toolbar-auto > .toolbar {
  width: 100%;
  max-height: 1000000px;
  margin-bottom: 0;
  border-top: 1px solid #ddd;
  transition: margin-bottom 0.2s cubic-bezier(0, 0, 0, 1), border-top-width 0.2s;
}
.wysiwyg:not(:focus-within):not(.focus):not(.focused) > [contenteditable=true]:not(:focus) ~ .toolbar-auto:after {
  height: 0;
  max-height: 1rem;
  transition: height 0.2s;
  transition-delay: 0.1s;
}
.wysiwyg:not(:focus-within):not(.focus):not(.focused) > [contenteditable=true]:not(:focus) ~ .toolbar-auto > .toolbar {
  max-height: 0;
  margin-bottom: -2000px;
  border-top-width: 0;
  transition: margin-bottom 0.2s cubic-bezier(1, 0, 1, 1), max-height 0s 0.2s, border-top-width 0.2s;
  transition-delay: 0.1s;
}

/* IE10+IE11: repeat due :focus-within */
_:-ms-lang(x), .wysiwyg:not(.focus):not(.focused) > [contenteditable=true]:not(:focus) ~ .toolbar-auto:after {
  height: 0;
  max-height: 1rem;
  -ms-transition: height 0.2s;
  transition: height 0.2s;
  transition-delay: 0.1s;
}

_:-ms-lang(x), .wysiwyg:not(.focus):not(.focused) > [contenteditable=true]:not(:focus) ~ .toolbar-auto > .toolbar {
  max-height: 0;
  margin-bottom: -2000px;
  border-top-width: 0;
  -ms-transition: margin-bottom 0.2s cubic-bezier(1, 0, 1, 1), max-height 0s 0.2s, border-top-width 0.2s;
  transition: margin-bottom 0.2s cubic-bezier(1, 0, 1, 1), max-height 0s 0.2s, border-top-width 0.2s;
  transition-delay: 0.1s;
}

/* buttons */
.wysiwyg .toolbar,
.wysiwyg-popup .toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}
.wysiwyg .toolbar *,
.wysiwyg-popup .toolbar * {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  min-width: 1px;
}
.wysiwyg .toolbar button.btn,
.wysiwyg-popup .toolbar button.btn {
  display: block;
  width: 2.2rem;
  height: 1.2rem;
  margin: 0;
  border: none;
  padding: 0.3rem 0;
  color: #999;
  background: transparent none;
  text-decoration: none;
  vertical-align: top;
  cursor: pointer;
  outline: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition: color 0.2s, background 0.2s;
  box-sizing: content-box;
}
.wysiwyg .toolbar button.btn:hover,
.wysiwyg-popup .toolbar button.btn:hover {
  color: HighlightText;
  background-color: Highlight;
}
.wysiwyg .toolbar button.btn svg,
.wysiwyg-popup .toolbar button.btn svg {
  display: block;
  width: 100%;
  height: 100%;
}/*# sourceMappingURL=text-editor.css.map */