/* Shared search control used by the blog index and article sidebar. */
.blog-search-control { position: relative; }
.blog-index-search.blog-search-control { flex: 0 1 272px; }
.sidebar-search.blog-search-control { width: 100%; }
.blog-search-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 44px 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--card);
  color: var(--fg);
  font: 500 14px/1.4 var(--font-jp);
  transition: border-color .15s, background .15s;
}
.blog-search-input::placeholder { color: var(--muted-soft); }
.blog-search-input:focus { outline: none; border-color: var(--border-strong); background: var(--card); }
.blog-search-button {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.blog-search-button:hover { color: var(--fg); }
.blog-search-button svg { width: 17px; height: 17px; }
@media (max-width: 760px) { .blog-index-search.blog-search-control { flex-basis: 100%; } }