.search-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-inline-size: 0;
}

.search-field__icon {
  position: absolute;
  inset-inline-start: var(--space-3);
  inline-size: var(--icon-md);
  block-size: var(--icon-md);
  pointer-events: none;
  color: var(--color-text-subtle);
}

.search-field__input {
  box-sizing: border-box;
  inline-size: 100%;
  block-size: var(--control-h);
  padding-block: 0;
  padding-inline: var(--space-8) calc(var(--control-h-sm) + var(--space-1));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: max(var(--text-sm), var(--text-input-min));
  text-overflow: ellipsis;
}

.search-field--small .search-field__input {
  block-size: var(--control-h-sm);
}

.search-field__input::placeholder {
  text-overflow: ellipsis;
}

.search-field__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.search-field__clear {
  position: absolute;
  inset-inline-end: var(--space-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--control-h-sm);
  block-size: var(--control-h-sm);
  border-radius: var(--radius-sm);
  color: var(--color-text-subtle);
  cursor: pointer;
}

.search-field__clear > svg {
  inline-size: var(--icon-sm);
  block-size: var(--icon-sm);
}

.search-field__input:placeholder-shown ~ .search-field__clear {
  display: none;
}

@media (hover: hover) {
  .search-field__clear:hover {
    color: var(--color-text);
  }
}

.search-field__input:focus {
  border-color: var(--color-accent);
}

.search-field__input:focus + .search-field__icon,
.search-field:focus-within .search-field__icon {
  color: var(--color-accent);
}

.search-field--topbar .search-field__input {
  border-color: var(--color-topbar-border);
  background: var(--color-topbar-surface);
  color: var(--color-topbar-text);
}

.search-field--topbar .search-field__input::placeholder {
  color: var(--color-topbar-text);
  opacity: 0.6;
}

.search-field--topbar .search-field__input:focus {
  border-color: var(--color-topbar-border-strong);
}

.search-field--topbar .search-field__clear {
  color: var(--color-topbar-text);
}

.search-field--topbar .search-field__icon,
.search-field--topbar:focus-within .search-field__icon {
  color: var(--color-topbar-text);
  opacity: 0.6;
}

@media (max-width: 768px) {
  .search-field__input {
    block-size: var(--control-h-touch);
    padding-inline-end: calc(var(--control-h-touch-sm) + var(--space-1));
  }

  .search-field__clear {
    inline-size: var(--control-h-touch-sm);
    block-size: var(--control-h-touch-sm);
  }

  .search-field--small .search-field__input {
    block-size: var(--control-h-touch-sm);
  }
}