/*
    Colours and layout for highlighted formula expressions.

    A Blazor application links this stylesheet, as it links dataDefinitions.css:

    <link href="_content/DataDefinitions.Xaf.Xpo.Module.Blazor/formulaSyntaxHighlighting.css" rel="stylesheet" />

    It is linked rather than left to the script because an expression is shown in places no
    editor reaches - a cell of the dependency tree, drawn by the tree list rather than by a
    property editor - and the script only runs where an editor is. Where it is not linked, the
    script injects it instead, which is how the Web Forms editor is coloured: a module there has
    no static asset pipeline to serve a file from.

    A deployment that wants different colours defines its own rules for the same classes in its
    own stylesheet, which is loaded as part of the application and so applied after these.

    The class names are the ones FormulaSyntaxHighlighter writes, so an expression that is only
    being read - rendered on the server - and one being edited are coloured identically.
*/

/* The overlay is drawn in the text area's own box, and the text area is drawn over it with its
   text made transparent, so what a user reads is the coloured copy and what they type into is
   still an ordinary text area. */
.dd-formula-expression-highlight {
    position: absolute;
    z-index: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    box-sizing: border-box;
    border-style: solid;
    border-color: transparent;
    background-color: transparent;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* The text area's own text is made transparent so that the coloured copy behind it is what is
   read, while the text area itself is still what is typed into and what holds the caret and the
   selection. The colours have to be forced: both platforms style their text editors more
   specifically than this, and text drawn over the overlay would hide it.

   Forcing them here is not always enough. A theme can name the text area more specifically than
   one class does and mark its own declaration important, and then this rule loses however it is
   written: XAF's Web Forms themes do that to an editor whose value failed validation, painting
   its text area pink over the overlay. So the script also writes the colour and the background
   onto the text area as important inline declarations, which no stylesheet outranks. The
   declarations are kept here as well, for a text area the script has classed but not yet styled,
   and to say in one place what the class means. */
.dd-formula-expression-input--highlighted {
    position: relative;
    z-index: 1;
    color: transparent !important;
    background-color: transparent !important;
    caret-color: #000000 !important;
}

/* Selected text is drawn by the text area, over the overlay, so the selection is kept
   translucent - otherwise selecting an expression would hide it. */
.dd-formula-expression-input--highlighted::selection {
    color: transparent !important;
    background-color: rgba(51, 144, 255, 0.35) !important;
}

/* An expression that is only being read. */
.dd-formula-expression-view {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* An expression in a row of a grid or tree. A row is read at a glance and next to its
   neighbours, so the expression is kept to one line and cut off where the column ends rather
   than wrapped into a row several lines tall; the whole of it is on the element's tooltip. */
.dd-formula-expression-cell {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A line the evaluator drops before it calculates anything. */
.dd-fx-comment {
    color: #6a9955;
    font-style: italic;
}

.dd-fx-number {
    color: #098658;
}

.dd-fx-string,
.dd-fx-date {
    color: #a31515;
}

.dd-fx-function {
    color: #795e26;
}

/* A name used as a function that nothing answers to, marked so a misspelling is seen while it
   is typed rather than when the formula is saved. */
.dd-fx-unknown-function {
    color: #cd3131;
    text-decoration: underline wavy #cd3131;
}

.dd-fx-keyword {
    color: #0000ff;
}

/* A code the evaluator supplies the value of, such as [Pi] or [StartOfPeriod]. */
.dd-fx-reserved-code {
    color: #267f99;
}

/* The period a reference is read in. */
.dd-fx-period {
    color: #af00db;
}

/* The data context part of a qualified reference. */
.dd-fx-data-context {
    color: #0451a5;
}

/* A reference to a variable, formula or property value. */
.dd-fx-code {
    color: #001080;
}

/* The square brackets around a reference, wherever one appears. They are drawn more quietly than
   the code between them, so that a long expression reads as the codes it refers to rather than as
   the punctuation holding them. */
.dd-fx-bracket {
    color: #8a8f98;
}

.dd-fx-operator {
    color: #444444;
}

.dd-fx-punctuation {
    color: #777777;
}

/* Something started and not finished, which the evaluator would refuse. */
.dd-fx-error {
    color: #cd3131;
    text-decoration: underline wavy #cd3131;
}

/* The list of completions that opens under the caret. It is put on the body rather than in the
   editor so that a view which clips what overflows it does not clip the list, and it is placed
   by the script from where the caret is drawn in the overlay. The entries are coloured with the
   same classes the highlighting uses, so the list reads as the expression does. */
.dd-formula-completion {
    position: fixed;
    z-index: 100000;
    display: none;
    box-sizing: border-box;
    min-width: 18em;
    max-width: 44em;
    max-height: 18em;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 2px 0;
    background-color: #ffffff;
    border: 1px solid #b8bcc4;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.4;
    color: #222222;
    text-align: left;
}

.dd-formula-completion-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.75em;
    padding: 2px 8px;
    cursor: pointer;
    white-space: nowrap;
}

.dd-formula-completion-item:hover {
    background-color: #f2f4f7;
}

.dd-formula-completion-item--selected,
.dd-formula-completion-item--selected:hover {
    background-color: #dfeaff;
}

.dd-formula-completion-item-text {
    flex: 0 0 auto;
}

/* A function's signature, or the name of what a code identifies. */
.dd-formula-completion-item-detail {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #6b7280;
}

/* What the entry means, shown for the selected entry only so the list stays one line an entry. */
.dd-formula-completion-item-description {
    display: none;
    flex-basis: 100%;
    white-space: normal;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #4b5563;
}

.dd-formula-completion-item--selected .dd-formula-completion-item-description {
    display: block;
}