/* ============================================================================
   generate-text-from-regexp.css - Generate Text from RegExp tool styles
   ============================================================================
   Loaded by:  developer-tools/generate-text-from-regexp.php
   Purpose:    Scoped styles for the Generate Text from RegExp tool: the
               side-by-side settings row (Regular Expression Pattern input
               plus Quantity input), the clickable example chips, and the
               invalid-pattern error state.
   Load order: Loaded AFTER tool-input.css (the shared tool-page base) and
               may override some of its values for .rx-* elements only.
   ============================================================================ */

/* Settings row: pattern input takes about two thirds, Quantity about one
   third, mirroring the classic generator layout. Stacks on small screens. */
.rx-settings {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 12px 0 6px;
}

.rx-field-pattern {
    flex: 2 1 0;
    min-width: 0;
}

.rx-field-quantity {
    flex: 1 1 0;
    max-width: 230px;
}

.rx-field-label {
    display: block;
    text-align: left;
    font-weight: 700;
    color: #198754;
    margin-bottom: 6px;
}

.rx-field-label i {
    margin-right: 6px;
    color: #6c757d;
}

/* The pattern input is monospace so regex syntax is easy to read and edit. */
.rx-pattern-input {
    font-family: Consolas, Menlo, "Courier New", monospace;
    letter-spacing: 0.2px;
}

/* Invalid pattern state (JS toggles this class on the pattern input). */
.rx-pattern-input.rx-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .25);
}

/* Syntax note under the settings row */
.rx-syntax-note {
    text-align: left;
    margin: 2px 0 0 0;
}

/* Clickable example chips: styled by Bootstrap (btn btn-sm btn-outline-success),
   the same pattern the QR code generator tools use for their size pickers.
   .rx-chip on the buttons is only the JS hook, it carries no styles here. */
.rx-examples {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 14px 0 4px;
}

/* Output stays monospace so generated codes and identifiers line up. */
.rx-output {
    font-family: Consolas, Menlo, "Courier New", monospace;
    white-space: pre;
    overflow-x: auto;
}

@media only screen and (max-width: 600px) {
    .rx-settings {
        flex-direction: column;
        gap: 4px;
    }

    .rx-field-quantity {
        max-width: none;
    }
}