.fr-popup {
  z-index: $zindex-popover !important;

}

.#{$ns}RichTextControl {

  >.tox-tinymce {
    border: 0;
  }

  >textarea {
    width: 100%;
  }

  min-height: px2rem(300px);
  height: auto;
  border: 1px solid transparent;
  width: 100%;
  border-radius: 4px;

  @include input-border();

  .fr-toolbar.fr-top {
    box-shadow: none;
    border: 0;
    position: relative;
  }

  .fr-box.fr-basic.fr-top:not(.fr-fullscreen) .fr-wrapper {
    min-height: 150px;
    max-height: 400px;
    box-shadow: none;
    overflow: auto;
    border: none;
  }

  .second-toolbar {
    border: none;
  }

  .fr-toolbar .fr-command.fr-btn,
  .fr-popup .fr-command.fr-btn {
    color: var(--Button--default-color);
  }

  .fr-toolbar .fr-command.fr-btn.fr-active,
  .fr-popup .fr-command.fr-btn.fr-active {
    color: var(--info);
    background: var(--Form-select-onHover-bg);
  }

  .fr-desktop .fr-command:hover,
  .fr-desktop .fr-command:focus {
    background: var(--Form-select-onHover-bg);
  }

  .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,
  .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active {
    background: var(--Form-select-onHover-bg);
  }

  .fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active {
    background: var(--info);
    color: #fff;
  }

  &.is-focused {
    border: var(--Form-input-borderWidth) solid var(--Form-input-onFocused-borderColor);
  }

  .fr-box.fr-basic .fr-element {
    min-height: 150px;
  }

  .fr-sticky-dummy {
    position: absolute;
  }

  &.is-disabled {
    border-color: var(--Form-input-onDisabled-borderColor);
    pointer-events: none;
    opacity: 0.6;

    .fr-box.fr-basic.fr-top .fr-wrapper {
      border-color: var(--Form-input-onDisabled-borderColor);
    }
  }

  //   &.amis-rich-text-control-md {
  //     .fr-box.fr-basic .fr-element,
  //     .fr-box.fr-basic.fr-top .fr-wrapper {
  //       min-height: 250px;
  //     }
  //   }

  //   &.amis-rich-text-control-lg {
  //     .fr-box.fr-basic .fr-element,
  //     .fr-box.fr-basic.fr-top .fr-wrapper {
  //       min-height: 300px;
  //     }
  //   }
}

// @media (min-width: 768px) {

//   .amis-rich-text-control.form-contorl-inline,
//   .form-group-inline .amis-rich-text-control {
//     display: inline-block;
//     width: 280px;
//   }
// }

// Jay
// wangEditor
.w-e-toolbar {
  background-color: #f1f1f1 !important;
  flex-wrap: wrap;
}

.#{$ns}RichTextControl.is-defaultOpen {
  min-height: unset;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden;

  .#{$ns}Form-item {
    margin-bottom: 0;
    flex: 1;

    .#{$ns}Form-value {
      display: block;

      .#{$ns}Form-control {
        display: block;
      }
    }
  }

  .#{$ns}TplSaving {
    top: 0;
  }

  .#{$ns}RichTextControl-value {
    display: flex;
    width: 100%;
    overflow: hidden;

    .#{$ns}RichTextControl-content {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

.#{$ns}PopRichText {
  .ant-popover-content {
    .ant-popover-inner {
      .ant-popover-inner-content {
        width: 550px;
      }
    }
  }
}

@include media-breakpoint-down(sm) {
  .#{$ns}RichTextControl {
    .w-e-text-container {
      min-height: 150px;
      max-height: 300px;
      height: unset !important;
      border: none !important;
      overflow-y: auto;
    }

    .w-e-toolbar {
      display: none !important;
    }
  }

  .toolbar-form-footer {
    width: 100%;
    height: 38px;
    display: flex;
    padding: 0 5px;
    align-items: center;
    border-bottom: solid 1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background-color: #F7F8FA;

    button>span {
      display: flex;
    }

    .adm-badge-fixed {
      transform: unset;
    }

    .adm-divider-vertical {
      margin: 0 6px;
    }

    .adm-button-small {
      padding: 8px 10px;
      display: flex;
      align-items: center;

      .block {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 3px;
      }
    }
  }

  .textarea-drawer {
    .#{$ns}Form-item {
      height: 100%;
      margin-bottom: 0;

      .#{$ns}Form-rowInner {
        height: 100%;

        .#{$ns}RichTextControl {
          height: 100%;
          border: none;

          .tox {
            height: 100% !important;

          }
        }

        .isIOS-focused {
          .tox {
            .tox-editor-header {
              position: fixed;
              bottom: 0;
              left: 0;
              right: 0;

            }
          }
        }
      }
    }
  }

  .textarea-drawer-rich {
    top: 0 !important;
    bottom: 0 !important;
  }

  .textarea--drawer-rich-ios {
    bottom: 16px !important;
  }
}