﻿.crm-quill {
    min-width: 0;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border-radius: 8px
}

    .crm-quill .ql-toolbar.ql-snow, .crm-quill .ql-container.ql-snow {
        border-color: var(--mud-palette-lines-inputs);
        font-family: inherit
    }

    .crm-quill .ql-toolbar {
        border-radius: 8px 8px 0 0;
        position: relative
    }

    .crm-quill .ql-editor {
        min-height: 180px;
        max-height: 520px;
        overflow-y: auto;
        font-size: 16px;
        font-family: Arial,Helvetica,sans-serif;
        line-height: 1.6;
        overflow-wrap: anywhere
    }

        .crm-quill .ql-editor.ql-blank::before {
            color: var(--mud-palette-text-secondary)
        }

    .crm-quill .ql-snow .ql-stroke {
        stroke: var(--mud-palette-text-primary)
    }

    .crm-quill .ql-snow .ql-fill {
        fill: var(--mud-palette-text-primary)
    }

    .crm-quill .ql-snow .ql-picker {
        color: var(--mud-palette-text-primary)
    }

    .crm-quill .ql-snow .ql-picker-options {
        background: var(--mud-palette-surface);
        border-color: var(--mud-palette-lines-inputs);
        z-index: 10
    }

    .crm-quill .ql-snow .ql-picker.ql-font .ql-picker-label:not([data-value])::before, .crm-quill .ql-snow .ql-picker.ql-font .ql-picker-item:not([data-value])::before {
        content: 'Arial'
    }

    .crm-quill .ql-font-serif {
        font-family: Georgia,serif
    }

    .crm-quill .ql-font-monospace {
        font-family: 'Courier New',monospace
    }

.crm-quill-tools {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-top: 0
}

    .crm-quill-tools button, .crm-quill-tools select {
        font: inherit;
        font-size: 13px;
        color: var(--mud-palette-text-primary);
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-lines-inputs);
        border-radius: 4px;
        min-height: 36px;
        padding: 4px 10px
    }

        .crm-quill-tools button:hover {
            background: var(--mud-palette-action-default-hover)
        }

.crm-quill button:focus-visible, .crm-quill select:focus-visible, .crm-quill .ql-picker-label:focus-visible, .crm-quill .ql-editor:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px
}

.crm-quill-hint, .crm-quill-status {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    padding: 8px 0
}

.crm-quill-error {
    padding: 12px;
    color: var(--mud-palette-error)
}

.crm-quill-disabled .crm-quill-toolbar, .crm-quill-disabled .crm-quill-tools {
    pointer-events: none;
    opacity: .6
}

@media(max-width:599.98px) {
    .crm-quill .ql-toolbar .ql-formats {
        margin-right: 6px;
        margin-bottom: 6px
    }

    .crm-quill-tools button {
        min-height: 44px
    }

    .crm-quill .ql-editor {
        min-height: 200px
    }
}
