/*
 * 검색 초기화 버튼 (admin · frontend 공용)
 *
 * search-reset.js 가 주입하는 a.sb-search-reset 의 스타일.
 * JS 는 아이콘을 얹지 않는다. 글리프가 필요하면 각 컨텍스트에서
 * .sb-search-reset::before 로 붙인다 (admin=Bootstrap Icons, frontend=Font Awesome).
 */

.sb-search-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    font-size: .8125rem;
    line-height: 1.2;
    padding: .35rem .7rem;
    border-radius: 4px;
    border: 1px solid currentColor;
    color: inherit;
    opacity: .75;
    transition: opacity .15s ease, background-color .15s ease;
}

.sb-search-reset:hover,
.sb-search-reset:focus-visible {
    opacity: 1;
    text-decoration: none;
    color: inherit;
}

.sb-search-reset:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

/* ── admin (change_list 검색 폼) ────────────────────────────────
   input-group 내부의 마지막 요소가 되므로, 검색 버튼(#button-addon2)의
   생김새에 맞춰 테두리를 지우고 좌측 구분선만 남긴다. */
#changelist-search .sb-search-reset {
    border: none;
    border-left: 1px solid var(--outline-variant);
    border-radius: 0;
    background: transparent;
    color: var(--on-surface-variant);
    font-size: .75rem;
    padding: .3rem .625rem;
    opacity: 1;
}

#changelist-search .sb-search-reset:hover,
#changelist-search .sb-search-reset:focus-visible {
    background: var(--surface-container-high);
    color: var(--on-surface);
}

/* bi-arrow-counterclockwise 의 codepoint. Bootstrap Icons 를 올릴 때 값이 바뀔 수
   있으므로, 아이콘이 네모(tofu)로 보이면 여기부터 확인한다. */
#changelist-search .sb-search-reset::before {
    font-family: "bootstrap-icons";
    content: "\f117";
    font-size: .875em;
}

/* ── frontend ──────────────────────────────────────────────── */
.board-search .sb-search-reset,
.filter-form .sb-search-reset,
.search-box .sb-search-reset {
    border-color: var(--border-color, #d0d0d0);
    color: var(--color-text, #333);
}

.board-search .sb-search-reset:hover,
.filter-form .sb-search-reset:hover,
.search-box .sb-search-reset:hover {
    background: var(--color-surface, #f5f5f5);
}