/*
 * Kiln · backend · поле поиска.
 *
 * Значок и поле в одной подложке. Обёртка — label, поэтому щелчок по
 * значку ставит курсор в поле, и своего обработчика для этого не нужно.
 */
.search-field {
    display: flex;
    box-sizing: border-box;
    width: var(--native-search-width);
    height: var(--native-control-height);
    align-items: center;
    gap: var(--native-control-gap);
    padding-inline: var(--native-control-gutter);
    border-radius: var(--native-radius-control);
    background: var(--native-control-fill);
}

/* Значок не сжимается: место уступает поле, а не он. */
.search-field > svg {
    width: var(--native-icon-small);
    height: var(--native-icon-small);
    flex-shrink: 0;
    color: var(--native-label-quaternary);
}

/*
 * Рамки и своей подложки у поля нет: их держит обёртка. Обводка по фокусу
 * снята намеренно — фокус виден по курсору в поле, а рамка внутри готовой
 * подложки читалась бы как вторая рамка.
 */
.search-field > input {
    width: 100%;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: var(--native-text);
    outline: none;
}

.search-field > input::placeholder {
    color: var(--native-label-quaternary);
}