/*
 * Corrective styling for the Support Ticket / Help Center Quill editors.
 *
 * The vendored quill.snow.css in this folder is v2.0.0-dev.3, while quill.core.css,
 * quill.bubble.css and the actual quill.min.js bundle are all v1.3.7 - loading the mismatched
 * snow.css against the v1.3.7 JS leaves toolbar buttons unstyled/blank (icons present in the
 * DOM but unsized) and the editor box collapsed to near-zero height. Rather than depend on
 * that mismatched file, this replicates just the classic v1.3.7 "snow" theme rules the bundled
 * JS actually expects, scoped only to the classes Quill itself generates.
 */
.ql-toolbar.ql-snow {
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 6px 6px 0 0;
    background: #f8f9fa;
}
.ql-toolbar.ql-snow .ql-formats {
    display: inline-block;
    margin-right: 12px;
    vertical-align: middle;
}
.ql-toolbar.ql-snow button {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-block;
    float: left;
    height: 24px;
    padding: 3px 5px;
    width: 28px;
}
.ql-toolbar.ql-snow button svg {
    float: left;
    height: 100%;
    width: 100%;
}
.ql-toolbar.ql-snow .ql-stroke {
    fill: none;
    stroke: #444;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}
.ql-toolbar.ql-snow .ql-fill {
    fill: #444;
}
.ql-toolbar.ql-snow button:hover,
.ql-toolbar.ql-snow button.ql-active {
    color: #06c;
}
.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow button.ql-active .ql-stroke {
    stroke: #06c;
}
.ql-toolbar.ql-snow button:hover .ql-fill,
.ql-toolbar.ql-snow button.ql-active .ql-fill {
    fill: #06c;
}
.ql-container.ql-snow {
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 6px 6px;
    height: auto !important;
}
.ql-editor {
    min-height: 120px !important;
    padding: 12px 15px;
    line-height: 1.5;
    background: #fff;
}
.ql-editor.ql-blank::before {
    color: rgba(0, 0, 0, 0.4);
    font-style: italic;
    left: 15px;
    right: 15px;
}

/*
 * Quill always renders the Link/Video/Formula popup as a real (non-inline) DOM element and
 * toggles a "ql-hidden" class to show/hide it - that class only does anything if some
 * stylesheet defines it, which normally happens in the theme CSS (snow.css/bubble.css). Since
 * this app's snow.css is the mismatched v2 file and isn't loaded, that popup was rendering as
 * a permanently-visible plain <input> sitting below the editor. These rules restore the
 * classic v1.3.7 snow theme's tooltip behavior/styling.
 */
.ql-hidden {
    display: none;
}
.ql-snow .ql-tooltip {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 5px #ddd;
    color: #444;
    padding: 5px 12px;
    white-space: nowrap;
    position: absolute;
    z-index: 10000;
}
.ql-snow .ql-tooltip::before {
    content: "Visit URL:";
    line-height: 26px;
    margin-right: 8px;
}
.ql-snow .ql-tooltip input[type=text] {
    display: none;
    border: 1px solid #ccc;
    font-size: 13px;
    height: 26px;
    margin: 0px;
    padding: 3px 5px;
    width: 170px;
}
.ql-snow .ql-tooltip a.ql-preview {
    display: inline-block;
    max-width: 200px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}
.ql-snow .ql-tooltip a.ql-action::after {
    border-right: 1px solid #ccc;
    content: "Edit";
    margin-left: 16px;
    padding-right: 8px;
}
.ql-snow .ql-tooltip a.ql-remove::before {
    content: "Remove";
    margin-left: 8px;
}
.ql-snow .ql-tooltip a {
    line-height: 26px;
    cursor: pointer;
}
.ql-snow .ql-tooltip.ql-editing a.ql-preview,
.ql-snow .ql-tooltip.ql-editing a.ql-remove {
    display: none;
}
.ql-snow .ql-tooltip.ql-editing input[type=text] {
    display: inline-block;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: "Save";
    padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
    content: "Enter link:";
}
.ql-snow .ql-tooltip[data-mode=formula]::before {
    content: "Enter formula:";
}
.ql-snow .ql-tooltip[data-mode=video]::before {
    content: "Enter video:";
}