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

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

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

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

.ql-toolbar.ql-snow {
  padding: $editor-toolbar-padding-y $editor-toolbar-padding-x !important;
  padding-right: $editor-toolbar-padding-x - $editor-toolbar-icon-space-x !important;
  padding-bottom: $editor-toolbar-padding-y - $editor-toolbar-icon-space-y !important;
  border-bottom: $editor-border !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 {
  width: $editor-toolbar-icon-width !important;
  height: $editor-toolbar-icon-height !important;
  padding: 0 !important;
  font-size: $editor-toolbar-icon-font-size;
  line-height: $editor-toolbar-icon-height !important;
  color: $editor-toolbar-icon-color;
  text-align: center;

  svg {
    display: none !important;
  }

  &:after {
    display: inline-block;
    width: 100%;
    height: 100%;
    font-family: "AI Design Icons";
    line-height: 100%;
  }
}

.ql-toolbar .ql-picker-label {
  padding: 0 !important;
  color: $editor-toolbar-icon-color;

  svg {
    display: none;
  }

  &:after {
    float: right;
    width: $editor-toolbar-icon-width !important;
    height: $editor-toolbar-icon-height !important;
    font-family: "AI Design Icons";
    font-size: $editor-toolbar-icon-font-size;
    line-height: $editor-toolbar-icon-height !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 {
  padding: 0 !important;
  margin: 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 {
  font-size: $editor-toolbar-icon-font-size + 2;
  content: "\F412";
}

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

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

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

.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: "\F8E6";
}

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

.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 {
  font-size: $editor-toolbar-icon-font-size - 2;
  content: "\F3B2";
}

.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 {
        display: inline-block;
        width: $editor-toolbar-icon-width !important;
        height: $editor-toolbar-icon-height !important;
        font-family: "AI Design Icons";
        font-size: $editor-toolbar-icon-font-size;
        line-height: $editor-toolbar-icon-height !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: "\F8BE";
}