.search-field {
    padding: var(--spacer);
    padding-left: 0;
    border-bottom: 4px solid var(--white);
    margin-bottom: var(--spacer);
}

.search-field::placeholder {
    color: var(--white);
}

.search-field:focus {
    outline: var(--white) dotted 2px;
    outline-offset: 4px;
}

/* Chrome, Edge, Safari */
input[type="search"]::-webkit-search-cancel-button {
  filter: invert(40%) sepia(100%) saturate(500%) hue-rotate(0deg);
}

/* Firefox doesn't show a default X in <input type="search"> */