/* Shared styles for reusable tool components (VirtualizedCodeViewer, LargeTextInput,
   formatting progress/error affordances) used by the JSON, XML and HTML pages. */

/* Virtualized code viewer (VirtualizedCodeViewer.razor).
   Container colors/fonts come from the Prism one-dark theme via the language-* class;
   the rules here add scrolling, fixed line metrics (must match LineHeightPx in the component)
   and the line-number gutter. */
.bev-code-viewer {
    height: 450px;
    overflow: auto;
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    /* Neutralise white-space: pre from the Prism theme so razor markup whitespace
       inside the container is ignored; each line re-enables it below. */
    white-space: normal;
}

.bev-code-viewer-line {
    white-space: pre;
    height: 20px;
    width: max-content;
    min-width: 100%;
}

.bev-code-viewer-gutter {
    display: inline-block;
    position: sticky;
    left: 0;
    min-width: 6ch;
    padding-right: 1.2ch;
    text-align: right;
    user-select: none;
    opacity: 0.45;
    /* Matches the Prism one-dark pre background so code scrolls beneath the gutter. */
    background: hsl(220, 13%, 18%);
}

/* Textarea slot of LargeTextInput: fill the outlined control like MudTextField's own slot. */
.bev-large-text-input {
    width: 100%;
    resize: vertical;
}

/* Indeterminate bar shown while a large document is being formatted. */
.bev-tool-progress {
    margin-bottom: 4px;
}

/* Parse-error alert shown in place of the formatted output. */
.bev-tool-error {
    margin-top: 8px;
}