/*
 * Mechanics only - no colours, no radii, no sizes. Everything visible is set in
 * Bricks. Each rule here exists to let a Bricks setting through or to hold the
 * layout together; anything else belongs in the builder, not in the plugin.
 */

.kij-search {
    display: flex;
    align-items: center;
    /* The status line is positioned against this, so a running search cannot
       change the height of the field and shift the page around it. */
    position: relative;
}

.kij-search__input {
    /* The one line that matters: an input inherits no font from its ancestors,
       so without this the typography set in Bricks would do nothing at all. */
    font: inherit;
    color: inherit;
    /* Transparent, so the background set on the form is what shows. */
    background: transparent;
    border: 0;
    /* Fills the space beside the button. min-width lets it shrink below its
       default intrinsic width instead of overflowing its container. */
    flex: 1;
    min-width: 0;
}

.kij-search__input:focus {
    /* Removed on purpose: the focus ring belongs on the whole field, which is
       styled in Bricks. Without this the browser draws a second ring inside it. */
    outline: none;
}

.kij-search__submit {
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Keeps a round button round when the label is empty. */
    flex: none;
}

.kij-search__status {
    position: absolute;
    top: 100%;
    left: 0;
}

.kij-search__status[hidden] {
    display: none;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}