/* SQL syntax highlighting of the textareas marked [data-sql-highlight] (static/js/sql-highlight.js).
   The textarea (text transparent, on top) and the coloured copy behind it (.sqlhl-backdrop)
   must share every metric that places a character: font, size, line height, tab size,
   padding and border width. Long lines scroll sideways in both, never wrap. */

.sqlhl {
    position: relative;
}

.sqlhl > .sqlhl-input,
.sqlhl > .sqlhl-backdrop {
    font-family: var(--bs-font-monospace);
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: normal;
    tab-size: 4;
    padding: .5rem .75rem;
    border-width: var(--bs-border-width);
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
    text-align: left;
}

.sqlhl > .sqlhl-input {
    position: relative;
    z-index: 1;
    background-color: transparent !important; /* the backdrop paints the field (validation icons stay) */
    color: transparent;
    caret-color: var(--bs-body-color);
    overflow: auto;
}
.sqlhl > .sqlhl-input::selection {
    color: transparent;
    background: rgba(var(--procy-primary-rgb), .28);
}
.sqlhl > .sqlhl-input::placeholder {
    color: var(--bs-secondary-color);
}

.sqlhl > .sqlhl-backdrop {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    border-style: solid;
    border-color: transparent;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
    background-image: linear-gradient(rgba(var(--procy-primary-rgb), .025), rgba(var(--procy-primary-rgb), .025));
    color: var(--bs-body-color);
}
/* Room past the text: the backdrop can always scroll as far as the textarea (which loses
   some width / height to its scrollbars). */
.sqlhl > .sqlhl-backdrop > code {
    display: block;
    width: max-content;
    min-width: 100%;
    padding: 0 3rem 3rem 0;
    font: inherit;
    color: inherit;
    white-space: inherit;
}
.sqlhl:has(> .sqlhl-input:disabled) > .sqlhl-backdrop,
.sqlhl:has(> .sqlhl-input[readonly]) > .sqlhl-backdrop {
    background-color: var(--bs-secondary-bg);
}

/* Colours only: bold or bigger glyphs would move the characters off the caret. */
.sqlhl {
    --sqlhl-keyword: rgb(var(--procy-primary-rgb));
    --sqlhl-function: #b45309;
    --sqlhl-string: #15803d;
    --sqlhl-number: #c2410c;
    --sqlhl-name: #0e7490;
    --sqlhl-comment: #6b7280;
    --sqlhl-operator: #64748b;
    --sqlhl-param: #9333ea;
    --sqlhl-param-bg: rgba(147, 51, 234, .12);
}
[data-bs-theme="dark"] .sqlhl {
    --sqlhl-function: #fbbf24;
    --sqlhl-string: #86efac;
    --sqlhl-number: #fdba74;
    --sqlhl-name: #67e8f9;
    --sqlhl-comment: #9ca3af;
    --sqlhl-operator: #94a3b8;
    --sqlhl-param: #d8b4fe;
    --sqlhl-param-bg: rgba(216, 180, 254, .16);
}

.sqlhl-keyword { color: var(--sqlhl-keyword); }
.sqlhl-function { color: var(--sqlhl-function); }
.sqlhl-string { color: var(--sqlhl-string); }
.sqlhl-number { color: var(--sqlhl-number); }
.sqlhl-name { color: var(--sqlhl-name); }
.sqlhl-comment { color: var(--sqlhl-comment); font-style: italic; }
.sqlhl-operator { color: var(--sqlhl-operator); }
.sqlhl-param {
    border-radius: .2rem;
    background: var(--sqlhl-param-bg);
    color: var(--sqlhl-param);
}