.searchHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 16px 0;

    .searchInputBox {
        height: 30px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 9px 0 5px;
        border-radius: 22px;
        border: 1px solid #e8e8e8;
        &:hover,
        &.isFocused {
            border-color: #286cfb;
        }

        .searchIcon {
            width: 20px;
            height: 20px;
        }

        .searchClear {
            width: 13px;
            height: 13px;
            cursor: pointer;
            margin-left: 5px;
        }

        .searchInput {
            flex: 1;
            height: 20px;
            padding-left: 8px;
            border: none;
            outline: none;
            line-height: 20px;
            caret-color: #457cf2;
        }

        input::placeholder {
            color: #b2b8c0;
            font-size: 12px;
        }
    }

    .cancelBtn {
        font-size: 12px;
        color: #1f2227;
        margin-left: 8px;
        cursor: pointer;
    }
}