.react-quill-editor {
  .quill {
    display: flex;
    flex-direction: column-reverse;
    padding: 1rem .875rem;
    border: 1px solid var(--#{$variable-prefix}input-floating-border);
    border-radius: 6px;
    &.quill-editor-focused{
      border-color: rgba(var(--#{$variable-prefix}primary-color), .75);
      border-style: solid;
      border-width: 2px;
      outline: 0;
      box-shadow: 0 0 0 6px rgba(var(--#{$variable-prefix}primary-color), .07);
    }
  }

  .ql-container {
    min-height: 30.625rem;
    max-height: 35.25rem;
    overflow-x: hidden;
    font-family: inherit;
    &.ql-snow {
      border: 0;
    }
  }
  /* stylelint-disable */
  .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke {
    stroke: #13171f;
  }
  .ql-snow .ql-picker.ql-expanded .ql-picker-options {
    z-index: 2;
  }
  .ql-toolbar {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    &.ql-snow {
      padding: .625rem 0 0;
      margin-top: .625rem;
      border-top: 2px solid var(--#{$variable-prefix}information-border);
      border-right: 0;
      border-bottom: 0;
      border-left: 0;
      .ql-formats {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 0 0 0 8px;
        margin-right: 0;
        gap: .125rem;
        &:first-child {
          padding-left: 0;
        }
      }
      button:hover .ql-stroke,
      button:focus .ql-stroke {
        stroke: #13171f;
      }
      .ql-active {
        background-color: #f0f1f8;
        border-radius: .25rem;
      }
      .ql-active .ql-stroke {
        stroke: #13171f;
      }
      .ql-picker-label:hover {
        color: #13171f;
        background-color: #f0f1f8;
        border-radius: .25rem;
      }
      .ql-picker-label:hover .ql-stroke {
        stroke: #13171f;
      }
      .ql-picker-label:hover:focus {
        color: #13171f;
        background-color: #f0f1f8;
        border-radius: .25rem;
      }
      .ql-picker-label:hover:focus .ql-stroke {
        stroke: #13171f;
      }

      .ql-picker-item.ql-selected,
      .ql-picker-item:hover {
        color: #13171f;
      }
      .ql-picker-label {
        display: inline-flex;
      }
      .ql-picker-item {
        &.ql-selected {
          color: #13171f;
        }
        &:hover {
          color: #13171f;
        }
      }
    }
  }
  /* stylelint-enable */

  .ql-editor {
    min-height: 11.25rem;
    padding: 0;
    &.ql-blank::before {
      left: 0;
      font-size: 12px;
      font-style: normal;
      color: #9b9ba2;
    }
  }

  .ql-formats {
    border-left: 2px solid var(--#{$variable-prefix}information-border);
    &:first-child {
      border-left: 0;
    }
    button {
      margin: 0 3px 0 0;
      font-size: .75rem;
      border-radius: .25rem;
      &:hover,
      &:focus {
        color: #13171f;
        background-color: #f0f1f8;
      }
    }
  }
  .ql-tooltip {
    left: 0 !important; /* stylelint-disable-line declaration-no-important */
    &.ql-editing {
      left: 0 !important; /* stylelint-disable-line declaration-no-important */
    }
  }
}

.content-editable-area {
  min-height: 11.25rem;
  max-height: 26.25rem;
  overflow-x: hidden;
  font-size: .75rem;
  line-height: .938rem;
  img {
    max-width: 100%;
  }

  &::-webkit-scrollbar-track {
    background-color: #f5f5f5;
  }

  &::-webkit-scrollbar {
    width: .5rem;
    height: .5rem;
    background-color: #13171f;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border: 2px solid #d8d8d8;
  }
}

.content-editable-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .675rem;
  padding-top: .625rem;
  margin-top: .625rem;
  border-top: 2px solid var(--#{$variable-prefix}information-border);
  .btn {
    padding: .5rem .563rem;
  }
  svg {
    g {
      stroke: currentColor;
    }
  }
}

.content-editable-divider {
  align-self: stretch;
  width: .063rem;
  min-width: .063rem;
  background: var(--#{$variable-prefix}information-border);
}

.section-editable-offcanvas {
  border-color: var(--#{$variable-prefix}input-floating-border);
  .content-editable-list {
    gap: .3rem;
  }
  svg {
    width: .875rem;
    height: .625rem;
    object-fit: contain;
  }
}

// .myeditor{
//   &.duplicated-toolbar{
//     .ql-toolbar:nth-child(1){
//       // display: none;
//     }
//   }
// }