.blog-search{position:relative;width:100%;max-width:320px}.blog-search__input{width:100%;height:40px;padding:0 36px 0 16px;border-radius:10px;border:1px solid rgba(0,0,0,.25);background:#fff;font-family:var(--codex-font-sans);font-size:14px;color:var(--codex-color-text);outline:none;transition:border-color var(--codex-transition-fast) ease-out}.blog-search__input::placeholder{color:var(--codex-color-muted)}.blog-search__input:focus{border-color:var(--codex-color-primary)}.blog-search__clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:none;background:none;cursor:pointer;font-size:16px;color:var(--codex-color-muted);display:flex;align-items:center;justify-content:center;padding:0;transition:color var(--codex-transition-fast) ease-out}.blog-search__clear:hover{color:var(--codex-color-text)}