/**
 * Bootstrap-3-compatible styling for .input-group-prepend/.input-group-append/.input-group-text.
 *
 * The app's FormHelper (BootstrapUI 3.x, see src/View/AppView.php) emits Bootstrap 4/5-style
 * markup for a control's 'append'/'prepend' options:
 *   <div class="input-group">
 *     <div class="input-group-prepend"><span class="input-group-text">...</span></div>
 *     <input class="form-control">
 *     <div class="input-group-append"><span class="input-group-text">...</span></div>
 *   </div>
 * but this theme's bundled CSS is Bootstrap 3, which only styles a single .input-group-addon and
 * has no rules at all for .input-group-prepend/-append/-text - so these divs render unstyled and
 * stack below the input instead of sitting inline with it. This replicates Bootstrap 3's
 * .input-group-addon look on the actually-generated markup instead. The parent .input-group
 * (display: table) and the .form-control's own corner-radius handling are already correct in
 * Bootstrap 3 as-is - the prepend/append divs occupy the exact :first-child/:last-child slots
 * Bootstrap 3 already expects an addon to be in, so only these two classes need new rules.
 *
 * Kept as a small, hand-written, standalone file (not part of the SASS build in src/sass/) so it
 * takes effect immediately without needing a theme rebuild - loaded via
 * plugins/Kreezalid/Core/templates/element/stylesheets.php.
 */
/*
 * All the box styling (padding/border/background/radius) lives on .input-group-prepend/-append
 * themselves, not on the nested .input-group-text span - a table-cell's height comes from the row
 * (matching the input next to it), but a block-level *child* of a table-cell doesn't stretch to
 * fill that height just by asking for 100% (that's what left the grey box short of the input's
 * height, with the text only tightly wrapped instead of filling the cell). Bootstrap 3's own
 * .input-group-addon has no such nesting - the styled box *is* the table-cell - so replicating
 * that here means putting the box styling on the actual table-cell element.
 */
.input-group-prepend,
.input-group-append {
    display: table-cell;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: normal;
    line-height: 1;
    color: #444;
    text-align: center;
    background-color: #eceeef;
    border: 1px solid #d6d6d6;
    border-radius: 2px;
}

.input-group-prepend {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-append {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
    /* No box of its own - just inherits/flows inside the cell above. */
    display: inline;
    padding: 0;
    border: 0;
    background: none;
}