.listSearchContainer { padding: 0 15px; padding-top: 16px; .icon16 { width: 16px; height: 16px; } .topSearch { padding: 10px 16px 5px 12px; display: flex; align-items: center; height: 44px; box-sizing: border-box; gap: 10px; border-radius: 44px; border: 0.5px solid rgba(0, 0, 0, 0.06); background: #FFF; box-shadow: 0 4px 48px 0 rgba(0, 0, 0, 0.08); .nut-input { padding: 0; height: 100%; } } .searchRight { display: flex; align-items: center; gap: 12px; .searchLine { width: 1px; height: 20px; border-radius: 20px; background: rgba(0, 0, 0, 0.06); } .searchText { color: #000000; font-size: 16px; font-weight: 600; line-height: 20px } } .searchIcon { width: 20px; height: 20px; } .historySearchTitleWrapper { display: flex; padding: 12px 15px; justify-content: space-between; align-items: flex-end; align-self: stretch; .historySearchTitle, .historySearchClear { color: #000; font-size: 14px; font-weight: 600; line-height: 20px; } .historySearchClear { color: #9a9a9a; display: flex; align-items: center; gap: 4px; } } .historySearchList { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; .historySearchItem { flex-shrink: 0; flex-grow: 0; display: flex; height: 28px; padding: 4px 12px; justify-content: center; align-items: center; gap: 2px; border-radius: 999px; border: 0.5px solid rgba(0, 0, 0, 0.06); background: rgba(0, 0, 0, 0.03); } } .searchSuggestion { padding: 6px 0; .searchSuggestionItem { padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; .searchSuggestionItemLeft { display: flex; align-items: center; gap: 12px; color: rgba(60, 60, 67, 0.60); font-size: 14px; font-weight: 400; line-height: 20px; } .highlight { color: #000000; } } } }