// Styles for Vellum's rich text-enabled inputs
// Mostly copied from Bootstrap, so that these inputs blend in with the rest
@import "lib/main";

.fd-input {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
    height: 28px;
    padding: 6px 12px;
    font-size: 12px;
    background: #ffffff;
    vertical-align: middle;
    color: rgb(85, 85, 85);
    white-space: nowrap;
    overflow: hidden;
    &:focus {
        border-color: rgba(82, 168, 236, 0.8);
        outline: 0;
        outline: thin dotted \9;
        /* IE6-9 */

        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
        -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
    }
    p {
        margin: 0; /* CKEditor line spacing */
    }
}

.fd-textarea {
    .fd-input();
    -moz-appearance: textfield-multiline;
    min-height: 4em;
    height: 4.5em;
    overflow: auto;
    resize: both;
    white-space: normal;
    word-break: break-word;

    &.fd-xpath-editor-text {
        height: 13em;
        font-family: monospace;
    }
}

.fd-search {
    background-color: @cc-bg;
    margin-bottom: 5px;
    > .form-inline {
        position: relative;
        padding: 0px @contentPaddingVellum;
        i {
            line-height: 42px;
        }
    }

    .control-label {
        padding-top: 0px;
    }

    // Icon and search box
    .fd-search-control {
        position: absolute;
        top: 5px;
        margin-left: 18px;
        width: 100%;
    }
}

.fd-commander {
    background-color: @cc-bg;
    padding: 5px;
    display: flex;
    align-items: center;

    input {
        border: 1px solid @cc-neutral-hi;
        height: 19px;
        width: calc(~"100% - 15px");
    }

    .fd-commander-close {
        background: none;
        border: none;
        color: @cc-neutral-low;
        position: absolute;
        right: 8px;
        cursor: pointer;
    }
}

.jstree-drop-active {
    border: 2px solid @cc-brand-mid !important;
    background: fade(@cc-brand-hi, 30%);
    box-shadow: 0 0 8px 2px fade(@cc-brand-mid, 40%);
    transition: box-shadow 0.2s, border 0.2s, background 0.2s;
}
