@import '../../sass/_custom-variables/libs';
@import "~bootstrap-markdown/css/bootstrap-markdown.min";

.md-editor.active {
  box-shadow: none !important;
}

.md-editor > textarea,
.md-editor > .md-preview {
  padding: 14px;
}

.md-editor > .md-header > .btn-group {
  margin-right: .3125rem;

  @include feature-rtl {
    margin-right: 0;
    margin-left: .3125rem;
  }
}

@include feature-rtl(false) {
  .md-controls {
    float: left;
  }

  .md-controls .md-control {
    right: auto;
    left: 5px;
    padding-left: 3px;
    padding-right: 10px;
  }

  .md-fullscreen-mode .md-fullscreen-controls {
    right: auto;
    left: 20px;
    text-align: left;
  }
}

@if $enable-light-style {
  .light-style {
    @import "../../sass/_appwork/include";

    .md-editor>.md-header,
    .md-editor .md-footer,
    .md-editor>textarea,
    .md-editor>.md-preview {
      background: $input-bg;
    }

    .md-editor {
      border-color: $input-border-color;

      &.md-fullscreen-mode {
        z-index: $zindex-modal-top;
      }
    }

    .md-editor:not(.md-fullscreen-mode) > .md-header,
    .md-editor:not(.md-fullscreen-mode) .md-footer {
      padding-left: $input-btn-padding-x / 2 !important;
      padding-right: $input-btn-padding-x / 2 !important;
    }

    .md-editor > textarea,
    .md-editor > .md-preview {
      border-color: $input-border-color;
      padding: $input-btn-padding-x !important;
    }
  }
}

@if $enable-material-style {
  .material-style {
    @import "../../sass/_appwork/include-material";

    .md-editor>.md-header,
    .md-editor .md-footer,
    .md-editor>textarea,
    .md-editor>.md-preview {
      background: #fff;
    }

    .md-editor {
      border-color: $input-border-color;

      &.md-fullscreen-mode {
        z-index: $zindex-modal-top;
      }
    }

    .md-editor:not(.md-fullscreen-mode) > .md-header,
    .md-editor:not(.md-fullscreen-mode) .md-footer {
      padding-left: $input-btn-padding-x / 2 !important;
      padding-right: $input-btn-padding-x / 2 !important;
    }

    .md-fullscreen-mode > .md-header .btn {
      box-shadow: none !important;
    }

    // Some hack to rewrite default form-contol style
    :not(.input-group) > div.md-editor[class] > textarea.md-input[class],
    .md-editor > .md-preview {
      border-color: $input-border-color;
      padding: $input-btn-padding-x !important;
    }
  }
}

@if $enable-dark-style {
  .dark-style {
    @import "../../sass/_appwork/include-dark";

    .md-editor>.md-header,
    .md-editor .md-footer,
    .md-editor>textarea,
    .md-editor>.md-preview {
      background: $input-bg;
    }

    .md-editor {
      border-color: $input-border-color;

      &.md-fullscreen-mode {
        z-index: $zindex-modal-top;
      }
    }

    .md-editor:not(.md-fullscreen-mode)>.md-header,
    .md-editor:not(.md-fullscreen-mode) .md-footer {
      padding-left: $input-btn-padding-x / 2 !important;
      padding-right: $input-btn-padding-x / 2 !important;
    }

    .md-editor>textarea,
    .md-editor>.md-preview {
      border-color: $input-border-color;
      padding: $input-btn-padding-x !important;
    }
  }
}