/* Wraps a leading magnifyingglass glyph + an <input type="search">.
   The glyph is absolutely positioned at the left edge; the input
   reserves enough left padding so user input does not collide. */

.search-input {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.search-input__icon {
    position: absolute;
    left: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color-3);
    pointer-events: none;
    width: 1em;
    height: 1em;
}

.search-input__field {
    padding-left: calc(var(--spacing-sm) + 1em + var(--spacing-xs));
}

/* Hide the native search clear button — it clashes with the glyph. */
.search-input__field::-webkit-search-cancel-button {
    -webkit-appearance: none;
}