// Table of Contents
// ==================================================
// Font-face
// Icons
// Editor

// scss-lint:disable ImportantRule
// scss-lint:disable NestingDepth
// scss-lint:disable SelectorDepth

// Font-face
// ==================================================
@font-face {
  font-display: auto;
  font-family: 'wysiwyg';
  font-style: normal;
  font-weight: text-weight(normal);
  src: url(font-path('wysiwyg/wysiwyg.woff')) format('woff');
}

// Icons
// ==================================================
[class^='wysiwyg-icon-'],
[class*=' wysiwyg-icon-'] {
  &::before {
    display: inline-block;
    font-family: 'wysiwyg';
    font-style: normal;
    font-variant: normal;
    font-weight: text-weight(normal);
    line-height: 1;
    margin: 0;
    padding: 0;
    speak: none;
    text-transform: none;
    vertical-align: middle;
  }
}
.wysiwyg-icon-align-center::before { content: '\f101'; }
.wysiwyg-icon-align-indent::before { content: '\f102'; }
.wysiwyg-icon-align-justify::before { content: '\f103'; }
.wysiwyg-icon-align-left::before { content: '\f104'; }
.wysiwyg-icon-align-outdent::before { content: '\f105'; }
.wysiwyg-icon-align-right::before { content: '\f106'; }
.wysiwyg-icon-align::before { content: '\f107'; }
.wysiwyg-icon-arrows-alt::before { content: '\f108'; }
.wysiwyg-icon-bold::before { content: '\f109'; }
.wysiwyg-icon-caret::before { content: '\f10a'; }
.wysiwyg-icon-chain-broken::before { content: '\f10b'; }
.wysiwyg-icon-check::before { content: '\f118'; }
.wysiwyg-icon-circle::before { content: '\f10c'; }
.wysiwyg-icon-close::before { content: '\f10d'; }
.wysiwyg-icon-code::before { content: '\f10e'; }
.wysiwyg-icon-eraser::before { content: '\f10f'; }
.wysiwyg-icon-font::before { content: '\f110'; }
.wysiwyg-icon-frame::before { content: '\f111'; }
.wysiwyg-icon-italic::before { content: '\f112'; }
.wysiwyg-icon-link::before { content: '\f113'; }
.wysiwyg-icon-magic::before { content: '\f114'; }
.wysiwyg-icon-menu-check::before { content: '\f115'; }
.wysiwyg-icon-minus::before { content: '\f116'; }
.wysiwyg-icon-orderedlist::before { content: '\f117'; }
.wysiwyg-icon-pencil::before { content: '\f118'; }
.wysiwyg-icon-picture::before { content: '\f119'; }
.wysiwyg-icon-question::before { content: '\f11a'; }
.wysiwyg-icon-redo::before { content: '\f11b'; }
.wysiwyg-icon-special-character::before { content: '\f11c'; }
.wysiwyg-icon-square::before { content: '\f11d'; }
.wysiwyg-icon-strikethrough::before { content: '\f11e'; }
.wysiwyg-icon-subscript::before { content: '\f11f'; }
.wysiwyg-icon-summernote::before { content: '\f120'; }
.wysiwyg-icon-superscript::before { content: '\f121'; }
.wysiwyg-icon-table::before { content: '\f122'; }
.wysiwyg-icon-text-height::before { content: '\f123'; }
.wysiwyg-icon-trash::before { content: '\f124'; }
.wysiwyg-icon-underline::before { content: '\f125'; }
.wysiwyg-icon-undo::before { content: '\f126'; }
.wysiwyg-icon-unorderedlist::before { content: '\f127'; }
.wysiwyg-icon-video::before { content: '\f128'; }

// Editor
// ==================================================
.wysiwyg-editor {
  position: relative;

  .wysiwyg-dropzone {
    background: transparentize(color(white), 0.15);
    color: color(gray);
    display: none;
    position: absolute;
    z-index: 100;

    &.hover { color: color(slate); }

    .wysiwyg-dropzone-message {
      display: table-cell;
      font-size: text-size(m);
      font-weight: text-weight(semibold);
      text-align: center;
      vertical-align: middle;
    }
  }

  &.dragover {
    .wysiwyg-dropzone { display: table; }
  }

  .wysiwyg-editing-area {
    position: relative;

    .wysiwyg-editable {
      outline: 0;

      sup { vertical-align: super; }
      sub { vertical-align: sub; }
    }
  }

  &.wysiwyg-frame {
    border: 1px solid color(haze);
    border-radius: border-radius(b);

    &.codeview {
      .wysiwyg-editing-area {
        .wysiwyg-editable { display: none; }
        .wysiwyg-codable { display: block; }
      }
    }
    &.fullscreen {
      left: 0;
      position: fixed;
      top: 0;
      width: 100% !important;
      z-index: 1050;

      .wysiwyg-editable { background: color(white); }
      .wysiwyg-resizebar { display: none; }
    }

    .wysiwyg-editing-area {
      overflow: hidden;

      .wysiwyg-editable {
        background: color(white);
        box-shadow: inset 0 2px 0 0 darkish-color(light-haze);
        color: color(slate);
        min-height: 140px;
        overflow: auto;
        padding: 10px;

        &[contenteditable='false'] { background: color(light-haze); }
      }
      .wysiwyg-codable {
        background: color(slate);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        box-sizing: border-box;
        color: color(white);
        display: none;
        font-family: text-family(monospace);
        font-size: text-size(s);
        margin-bottom: 0;
        padding: 10px;
        resize: none;
        width: 100%;
      }
    }
    .wysiwyg-statusbar {
      background: color(light-haze);
      border-top: 1px solid color(haze);
      border-bottom-left-radius: border-radius(b);
      border-bottom-right-radius: border-radius(b);

      .wysiwyg-resizebar {
        height: 11px;
        cursor: ns-resize;
        padding-top: 1px;
        width: 100%;

        .wysiwyg-icon-bar {
          border-top: 2px solid color(gray);
          margin: 1px auto;
          width: 20px;
        }
      }
    }
    .wysiwyg-placeholder { padding: 10px; }
  }
}
.wysiwyg-popover {
  .popover {
    max-width: none;

    .arrow { left: 20px !important; }
    .popover-content {
      a {
        display: inline-block;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
      }
    }
  }
}
.wysiwyg-popover .popover-content,
.panel-heading.wysiwyg-toolbar {
  background: color(light-haze);
  border-bottom: 1px solid color(haze);
  margin: 0;
  padding: 0 5px 5px;

  > .wysiwyg-btn-group {
    .wysiwyg-btn {
      border-color: color(haze);
      font-size: text-size(xs);
      padding: 8px 10px 9px;
    }
  }
  > .btn-group {
    display: inline-block;
    margin-left: 0;
    margin-right: 5px;
    margin-top: 5px;
  }
  .btn-group {
    .wysiwyg-table {
      min-width: 0;
      padding: 5px;

      .wysiwyg-dimension-picker {
        font-size: text-size(m);

        .wysiwyg-dimension-picker-mousecatcher {
          cursor: pointer;
          height: 10em;
          position: absolute !important;
          width: 10em;
          z-index: 3;
        }
        .wysiwyg-dimension-picker-unhighlighted {
          background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat;
          height: 5em;
          position: relative !important;
          width: 5em;
          z-index: 1;
        }
        .wysiwyg-dimension-picker-highlighted {
          background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIjd6vvD2f9LKLW+AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKwNDEVT0AAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat;
          height: 1em;
          position: absolute !important;
          width: 1em;
          z-index: 2;
        }
      }
      .wysiwyg-dimension-display {
        font-size: text-size(s);
        font-weight: text-weight(semibold);
        margin-top: 3px;
        text-align: center;
      }
    }
  }
  .wysiwyg-style {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      line-height: 1;
      margin: 0;
      padding: 0;
    }
    pre { padding: 3px 5px 5px; }
  }
  .wysiwyg-color {
    .dropdown-toggle {
      padding-left: 5px;
      width: 20px;
    }
    .dropmenu {
      min-width: 340px;

      .btn-group {
        float: left;
        margin: 0;
        padding: 5px;

        .wysiwyg-palette-title {
          border-bottom: 1px solid color(haze);
          font-size: text-size(s);
          font-weight: text-weight(semibold);
          margin: 5px 0;
          padding-bottom: 5px;
          text-align: center;
        }
        .wysiwyg-color-reset {
          font-size: text-size(s);
          margin: 10px 0;
          padding: 4px 0 5px;
        }
        .wysiwyg-color-row { height: 20px; }
      }
    }
  }
  .wysiwyg-fontname {
    .wysiwyg-current-fontname {
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 60px;
    }
  }
  .wysiwyg-para {
    > .btn-group {
      display: inline-block;

      > .btn {
        border-left: 0;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
      }
    }

    .dropmenu {
      min-width: 205px;
      padding: 5px;

      > .btn-group { float: left; }
    }
  }
  .dropmenu {
    min-width: 90px;

    &.right {
      left: auto;
      right: 0;

      &::before,
      &::after { left: auto !important; }
      &::before { right: 9px; }
      &::after { right: 10px; }
    }
    &.wysiwyg-check {
      li {
        a {
          i { display: none; }

          @if ($pseudo-elements) {
            &.checked,
            &:hover,
            &:active,
            &:focus { color: color(primary); }
          }
        }
      }
    }
  }
  .wysiwyg-fontsize-10 { font-size: text-size(xxs); }
  .wysiwyg-color-palette {
    line-height: 1;

    div {
      .wysiwyg-color-btn {
        border: 1px solid color(white);
        height: 20px;
        margin: 0;
        padding: 0;
        width: 20px;

        @if ($pseudo-elements) {
          &:hover { border: 1px solid color(slate); }
        }
      }
    }
  }
}
.wysiwyg-dialog {
  > div { display: none; }

  .form-group {
    margin-left: 0;
    margin-right: 0;
  }
  .wysiwyg-modal-form { margin: 0; }
  .wysiwyg-image-dialog {
    .wysiwyg-dropzone {
      border: 4px dashed color(gray);
      color: color(gray);
      font-size: text-size(l);
      margin-bottom: 10px;
      min-height: 100px;
      text-align: center;
    }
  }
}
@-moz-document url-prefix() {
  .wysiwyg-image-input { height: auto; }
}
.wysiwyg-placeholder {
  display: none;
  color: color(gray);
  position: absolute;
}
.wysiwyg-handle {
  .wysiwyg-control-selection {
    border: 1px solid color(slate);
    display: none;
    position: absolute;

    > div { position: absolute; }

    .wysiwyg-control-selection-bg {
      background: color(slate);
      opacity: 0.3;
      height: 100%;
      width: 100%;
    }

    .wysiwyg-control-handle,
    .wysiwyg-control-holder,
    .wysiwyg-control-sizing {
      border: 1px solid color(slate);
      height: 7px;
      width: 7px;
    }
    .wysiwyg-control-sizing { background: color(white); }
    .wysiwyg-control-nw {
      border-bottom: 0;
      border-right: 0;
      left: -5px;
      top: -5px;
    }
    .wysiwyg-control-ne {
      border-bottom: 0;
      border-left: 0;
      right: -5px;
      top: -5px;
    }
    .wysiwyg-control-sw {
      border-right: 0;
      border-top: 0;
      bottom: -5px;
      left: -5px;
    }
    .wysiwyg-control-se {
      bottom: -5px;
      cursor: se-resize;
      right: -5px;

      &.wysiwyg-control-holder {
        border-left: 0;
        border-top: 0;
        cursor: default;
      }
    }
    .wysiwyg-control-selection-info {
      background: color(slate);
      border-radius: border-radius(b);
      bottom: 0;
      color: color(white);
      font-size: text-size(xs);
      margin: 5px;
      opacity: 0.7;
      padding: 5px;
      right: 0;
    }
  }
}
.wysiwyg-hint-popover {
  min-width: 100px;
  padding: 2px;

  .popover-content {
    max-height: 150px;
    overflow: auto;
    padding: 3px;

    .wysiwyg-hint-group {
      .wysiwyg-hint-item {
        display: block !important;
        padding: 3px;

        @if ($pseudo-elements) {
          &:hover,
          &.active,
          &:active,
          &:focus {
            background: #428bca;
            clear: both;
            color: color(white);
            cursor: pointer;
            display: block;
            font-weight: text-weight(normal);
            outline: 0;
            text-decoration: none;
            white-space: nowrap;
          }
        }
      }
    }
  }
}