.quill {
    :global(.ql-toolbar) {
        border: 1px solid #D8DCE6;
        border-radius: 6px 6px  0 0;
    }
    :global(.ql-editor) {
        height: 300px;  
        border: 1px solid transparent;
    }
    :global(.ql-container.ql-snow) {
        border: 1px solid #D8DCE6;
        border-radius: 0 0 6px 6px;
    }

    &:focus,
    &:focus-within,
    &:active {
        :global(.ql-container.ql-snow) {
            box-sizing: content-box;
            border-color: #409EFF;
            /* border: 1px solid #409EFF; */
        }
        :global(.ql-toolbar) {
            box-sizing: content-box;
            border-color: #409EFF;
            border-bottom-color: #D8DCE6;
        }
    }
    :global(.ql-picker-label::before) {
        font-weight: normal;
    }
    :global(.ql-container) {
        font-size: inherit;
        font-family: inherit;
        font-weight: normal;
        color: #909399;
    }

    :global(.ql-snow .ql-icon-picker .ql-picker-item) {
        outline: none;
    }

    :global(.ql-toolbar.ql-snow .ql-picker-label) {
        outline: none;
        &:before {
            position: absolute;
            display: block;
            line-height: 17px;
            top: 3px;
        }
    }

    :global(.ql-snow .ql-icon-picker)    {
        float: none;
        position: absolute;
        top: 11px;
    }

    :global(.ql-toolbar.ql-snow .ql-formats) {
        height: 24px;
        &:nth-child(4){
            margin-left: 15px;
            margin-right: 0;
        }
    }

    :global(.ql-snow) {
        p + p {
            margin-top: 20px;
        }
    }
}

.error {
    :global(.ql-container.ql-snow) {
        border-color: #F56C6C !important;
        outline: 0;
    }
    :global(.ql-toolbar),
    :global(.ql-toolbar .ql-snow) {
        border-color: #F56C6C !important;
        border-bottom: 1px solid #D8DCE6 !important;
    }
}