@layer components {
  .search-box {
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
  }

  .search-box__form {
    display: flex;
    align-items: center;
  }

  .search-box__icon {
    margin-left: var(--inline-space-half);
    color: var(--color-ink-light);
    flex-shrink: 0;
  }

  .search-box__input {
    flex: 1;
    border: none;
    padding: var(--block-space-half) var(--inline-space-half);
    font-size: var(--text-footnote);
    background: transparent;

    &:focus {
      outline: none;
    }

    &::placeholder {
      color: var(--color-ink-light);
    }
  }
}