.quill-editor img {
  max-width: 100%;
}

.ql-container .ql-editor {
  min-height: 20em;
  padding-bottom: 1em;
  max-height: 25em;
}

.quill-editor {
  border: $editor-border;
  border-radius: $border-radius;
  background: $body-bg;
}

.ql-toolbar.ql-snow, .ql-container.ql-snow {
  font-family: $font-family-sans-serif !important;
  border: none !important;

}

.ql-toolbar.ql-snow {
  border-bottom: $editor-border !important;
  padding: $editor-toolbar-padding-y $editor-toolbar-padding-x !important;
  padding-bottom: $editor-toolbar-padding-y - $editor-toolbar-icon-space-y !important;
  padding-right: $editor-toolbar-padding-x - $editor-toolbar-icon-space-x !important;
}

.ql-toolbar {
  color: $editor-toolbar-icon-color !important;
}

.ql-editor {
  color: $editor-color !important;
}

.ql-snow .ql-picker {
  color: $editor-toolbar-icon-color !important;
}

.ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button{
  padding: 0 !important;
  width: $editor-toolbar-icon-width !important;
  height: $editor-toolbar-icon-height !important;
  line-height: $editor-toolbar-icon-height !important;
  text-align: center;
  font-size: $editor-toolbar-icon-font-size;
  color: $editor-toolbar-icon-color;
  svg {
    display: none !important;
  }
  &:after {
    font-family: "AI Design Icons";
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100%;

  }
}

.ql-toolbar .ql-picker-label {
  padding: 0 !important;
  color: $editor-toolbar-icon-color;
  svg {
    display: none;
  }
  &:after {
    font-family: "AI Design Icons";
    display: inline-block;
    float: right;
    font-size: $editor-toolbar-icon-font-size;
    height: $editor-toolbar-icon-height !important;
    line-height: $editor-toolbar-icon-height !important;
    width: $editor-toolbar-icon-width !important;
  }
}

.ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: $editor-toolbar-icon-hover-active-color !important;
}
.ql-snow.ql-toolbar .ql-formats {
  button{
    margin-right: $editor-toolbar-icon-space-x;
    &:last-child{
      margin-right: 0;
    }
  }
}
.ql-toolbar.ql-snow .ql-formats {
  margin:0 !important;
  padding:0 !important;
  margin-right: $editor-toolbar-icon-group-space-x !important;
  margin-bottom: $editor-toolbar-icon-space-y !important;
}

.ql-snow .ql-color-picker, .ql-snow .ql-icon-picker {
  width: 24px  !important;
}
.ql-bold:after {
  content: '\F412';
  font-size: $editor-toolbar-icon-font-size + 2;
}

.ql-italic:after {
  content: '\F42D';
  font-size: $editor-toolbar-icon-font-size + 2;
}

.ql-underline:after {
  content: '\F449';
}

.ql-strike:after {
  content: '\F441';
  font-size: $editor-toolbar-icon-font-size - 2;
}

.ql-blockquote:after {
  content: '\F43D';
}

.ql-code-block:after {
  content: '\F2CE';
}

.ql-header[value='1']:after {
  content: '\F41C';
}

.ql-header[value='2']:after {
  content: '\F41D';
}

.ql-list[value='ordered']:after {
  content: '\F434';
}

.ql-list[value='bullet']:after {
  content: '\F432';
}

.ql-script[value='sub']:after {
  content: '\F443';
}

.ql-script[value='super']:after {
  content: '\F444';
}

.ql-indent[value='-1']:after {
  content: '\F42B';
}

.ql-indent[value='+1']:after {
  content: '\F42C';
}

.ql-indent[value='+1']:after {
  content: '\F42C';
}

.ql-direction:after {
  content: '\F446';
}

.ql-direction.ql-active:after {
  content: '\F447';
}
.ql-clean:after {
  content: '\F413';
}
.ql-link:after {
  content: '\F532';
}
.ql-image:after {
  content: '\F643';
  font-size: $editor-toolbar-icon-font-size - 2;
}
.ql-video:after {
  content: '\F3CB';
}
.ql-snow .ql-color-picker {
  width: $editor-toolbar-icon-width !important;
  margin-right: $editor-toolbar-icon-space-x !important;
}
.ql-color .ql-picker-label:after {
  content: '\F415';
}
.ql-background .ql-picker-label:after {
  content: '\F415';
}

.ql-align {
  .ql-picker-label{
    &:after {
      content: '\F40D';
    }
    &[data-value="center"]:after {
      content: '\F40B';
    }
    &[data-value="right"]:after {
      content: '\F40F';
    }
    &[data-value="justify"]:after {
      content: '\F40C';
    }
  }

  .ql-picker-options {
    .ql-picker-item {
      &>svg {
        display: none !important;
      }
      &:after{
        font-family: "AI Design Icons";
        display: inline-block;
        font-size: $editor-toolbar-icon-font-size;
        height: $editor-toolbar-icon-height !important;
        line-height: $editor-toolbar-icon-height !important;
        width: $editor-toolbar-icon-width !important;
        content: '\F40D';
      }
      &[data-value="center"]:after {
        content: '\F40B';
      }
      &[data-value="right"]:after {
        content: '\F40F';
      }
      &[data-value="justify"]:after {
        content: '\F40C';
      }
    }

  }
}


.ql-size .ql-picker-label:after,.ql-header .ql-picker-label:after,.ql-font .ql-picker-label:after{
    content: '\F292';
}