/* TextSource widget */

.textsource-widget {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid #bbb;
    background: #fff;
    overflow: hidden;
    min-height: 80px;
    min-width: 100px;
}

/* Grid: main area + vertical scrollbar, and horizontal scrollbar row */
.textsource-body-area {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    overflow: hidden;
    min-height: 0;
}

/* Main area holds gutters + edit wrap. Vertical scrolling happens here. */
.textsource-main {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    flex-direction: row;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    /* hide native vertical scrollbar; we use ScrollBar widget */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.textsource-main::-webkit-scrollbar {
    display: none;
}

/* Icon gutter (leftmost) */
.textsource-icon-gutter {
    flex: none;
    width: 22px;
    background: #f4f4f4;
    border-right: 1px solid #e0e0e0;
    user-select: none;
}

.textsource-icon-cell {
    height: 1.4em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.textsource-line-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

/* Line number gutter */
.textsource-number-gutter {
    flex: none;
    min-width: 2.5em;
    padding: 0 4px;
    background: #f4f4f4;
    border-right: 1px solid #e0e0e0;
    color: #888;
    font-family: monospace;
    font-size: 12px;
    text-align: right;
    user-select: none;
}

.textsource-line-number {
    height: 1.4em;
    line-height: 1.4em;
    cursor: pointer;
}

/* Edit wrapper: clips horizontally */
.textsource-edit-wrap {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    min-width: 0;
    /* hide native horizontal scrollbar; we use ScrollBar widget */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.textsource-edit-wrap::-webkit-scrollbar {
    display: none;
}

/* Contenteditable edit element */
.textsource-edit {
    position: relative;
    outline: none;
    padding: 0 4px;
    line-height: 1.4em;
    white-space: pre;
    caret-color: #000;
}

.textsource-line {
    /* Each line rendered as its own div so that line heights stay
       predictable and align with the line number gutter. */
    line-height: 1.4em;
    min-height: 1.4em;
}

/* Scrollbar placement in the grid */
.textsource-vbar {
    grid-row: 1;
    grid-column: 2;
}
.textsource-hbar {
    grid-row: 2;
    grid-column: 1;
}
.textsource-corner {
    grid-row: 2;
    grid-column: 2;
    background: #f4f4f4;
}