/* Editor styles
 */

.qt-editor {}

toolbar-bg = #f8f8f8;

.qt-editor .ta-toolbar {
    padding: 3px;
    border-color: darken(toolbar-bg, 4%) darken(toolbar-bg, 10%);
    border-width: 1px 1px 0;
    border-style: solid;
    border-radius: 3px 3px 0 0;
    background: toolbar-bg;
}

.qt-editor .ta-toolbar .btn {
    margin-bottom: 0;
    border-radius: 2px;
    background: toolbar-bg;
    border-color: darken(toolbar-bg, 12%);
}

.qt-editor .ta-toolbar .btn:hover {
    background: #fff;
    border-color: darken(toolbar-bg, 16%);
}


.qt-editor .ta-editor {
    border-radius: 0 0 3px 3px;
}

.qt-editor .ta-editor [contenteditable]:focus {
    outline: 0;
    box-shadow: none;
}

.ta-root.focussed > .ta-scroll-window.form-control {
    box-shadow: none;
    border-color: $color1;
}

/* insert var dropdown
 */

.insert-var-container {
    padding: 0;
    border: 0;
}

.insert-var-container > button:hover {
    box-shadow: none;
}

.insert-var-container > button .caret {
    margin: 0 0 0 emCalc(4);
}

.insert-var-container ul {
    padding: 0;
    overflow: hidden;
    
    text-align: left;
}

.insert-var-container ul a {
    padding: emCalc(3) emCalc(12);
}

/* we need to still use paragraphs as element wrappers 
 * so that textAngular turns them into newlines.
 * TODO once
 * https://github.com/domchristie/to-markdown/issues/49
 * is merged, we can use divs.
 */

.qt-editor [contenteditable] p {
    margin: 0;
}